如何實現 font-size 的響應式

本文樣式代碼採用 SCSS。

那麼多的文章講了響應式的網站如何佈局，使用 CSS 如何實現，如何 Blah Blah 的。可是，咱們都忘了很重要的一點——對字體大小的響應式控制。

如今的不少網站，從佈局上來講，儘管是響應式的(固然，或許能夠說成所謂響應式的)。可是，從字體上來講，卻不必定是響應式的。雖然，每一個網站可能會經過某些方式(好比頻繁使用 @media )來讓本身的網站在不一樣的屏幕大小下顯示不一樣大小的字體，可是，這樣不能叫作響應式，這只是一種適應式的作法。

那麼，怎麼樣才能對咱們的 font-size 實現真正的響應式呢？

咱們須要作的主要有如下兩點：

一、制定一個最大的和最小的屏幕寬度值，咱們的 font-size 應該是在這個屏幕範圍內平滑均勻的變化；

不可能讓字體大小一直不停的變化。試想一下，本身一直縮小或者方法瀏覽器，字體一直變小或者變大的場景。

二、制定最大和最小的 font-size，屏幕大小小於最小的屏幕寬度值的時候，應用最小的 font-size，反之，應用最大的 font-size；

OK，計劃制定好了，那麼，應該如何實施呢？咱們須要用到哪些技術呢？

其實要用到的技術很少，只是，咱們須要把腦子轉一下。

• @media：CSS Level 3 提供的媒體查詢，只要作過響應式，或者任何適應屏幕功能的確定用過這個屬性。因此，在此不過多解釋此屬性，詳細可查看 @media | MDN
• vw：Viewport 單位，1vw 至關於屏幕寬度的百分之一。此處也不過多解釋，詳細可查看 length | CSS
• calc：這是 CSS 提供的一個很是強大的屬性，能夠用來動態計算 CSS 的值。咱們的功能主要就是經過這個函數來實現。詳細可查看 calc | MDN

OK，須要的技術也齊全了。那麼，如今就來一步一步實現。

定義變量

按照上文中所說的計劃那樣，咱們須要定義四個值，他們分別是最小屏幕寬度，最大屏幕寬度，最小字體，最大字體。

$min-font-size: 14px;
$max-font-size: 18px;
$min-screen: 600px;
$max-screen: 1200px;複製代碼

不過，使用 px 來定義字體大小顯得不是很優雅，咱們可使用 rem 來定義咱們的字體。那麼，這時候，就須要先對網站的根元素設置字體大小了。

:root {
    font-size: 10px;
}複製代碼

而後，再來更新咱們的變量。

$min-font-size: 1.4rem;
$max-font-size: 1.8rem;
$min-screen: 600px;
$max-screen: 1200px;複製代碼

咱們把咱們的變量定義和根元素的 font-size 放在文件的頂部。在這裏，咱們就不寫那些相關的 reset 等樣式了。

加入測試內容

起了個好頭，而後進行下一步，很簡單，寫咱們的 HTML，此處不作過多贅述。

<header>
    <h2>This is Header.</h2>
</header>
<section>
    <article>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </article>
</section>複製代碼

使用 @media 對限制字體大小邊界值

上文中說過，在咱們的屏幕寬度小於 600px 的時候，字體大小爲 1.4rem，屏幕寬度大於 1200px 的時候，字體大小爲 1.8rem。這個功能實現起來很簡單，只須要應用相應的一小段媒體查詢就好了。

@media (min-width: $max-screen) {
    article {
        font-size: $max-font-size;
    }
}

@media (max-width: $min-screen) {
    article {
        font-size: $min-font-size;
    }
}複製代碼

OK，就這麼一段代碼，咱們就能夠將字體大小的邊界值進行限制。在屏幕寬度小於或者大於對應的屏幕寬度值的時候，咱們的字體大小都會保持在一個恆定的值。

那麼，邊界限制作好了，接下來就是要實現真正的響應式了。怎麼說呢？咱們要讓咱們的 font-size 在 600px ~ 1200px 的屏幕寬度範圍內平滑的變化。固然，這還不夠，並非說，只是給 font-size 設置一個百分比或者任何其餘的相對單位，而後讓這個字體可以在放大縮小屏幕的同時也可以放大縮小。咱們要作的，是要經過精確的大小控制來實現響應式。

使用 calc 函數實現字體大小的響應式

仔細看看上文中對字體大小邊界值的限制的代碼，已經有兩個 @media 了，在這個部分，咱們確定還要加一個 @media，是否是顯得有點多餘？因此，咱們能夠稍微精簡一下。

article {
    font-size: $min-font-size;
}

@media (min-width: $min-screen) and (max-width: $max-screen) {
    // ...
}

@media (min-width: $max-screen) {
    article {
        font-size: $max-font-size;
    }
}複製代碼

只要兩個 @media 其實就夠了。對於不在媒體查詢範圍內的，只須要設置一個默認值就好了。可是，要注意的是，這個默認值必定要寫在兩個媒體查詢規則的前面。不然，會因爲 CSS 的層疊的特性，後聲明的樣式會覆蓋掉先聲明的樣式，從而致使媒體查詢規則不起做用。

那麼，要實如今這個屏幕寬度範圍內精確平滑的變化，確定須要用到一點數學計算。

一、font-size 變化的範圍是 1.8rem - 1.4rem = 0.4rem；

二、屏幕寬度的變化範圍是 1200px - 600px = 600px；

三、最小的 font-size 是 1.4rem。那麼，屏幕寬度只要大於 600px，這個值確定會增長，同時，只要屏幕寬度達到 1200px，這個值也達到 1.8rem，而後便再也不變化；

能夠看下圖：

好比，咱們如今有三種屏幕寬度，分別是 600px，1000px，1200px。那麼，仔細觀察左邊的參考線，咱們將最小的那個屏幕寬度去掉，至關於就剩下了兩個值，一個是 a，一個是 b。

因爲 1200px 是咱們設置的屏幕寬度的最大值，那麼，也就是說，b 的變化範圍最大也就是 a 的長度。通俗一點說就是，能夠把 a 和 b 當作進度條，a 爲 100% 的長度，b 爲不斷增長或者減小的長度。因此，這裏就存在了一個比例值，當 b 爲 0 的時候，這個比例也爲 0，當 b 爲 100% 的時候，這個比例就是 1。

那麼，按照這樣的思路，轉換到對應 font-size 的變化：變化範圍是 0.4rem，這是分母，那麼，分子該如何計算呢？咱們怎麼知道字體增長了多少呢？

此處確定是沒有減小的。咱們是在 600px ~ 1200px 之間變化的，最小的字體爲 1.4rem，不管怎麼算，字體大小都不會再減少了。

因此，此處還有一個小小的轉換。想想，咱們變化的不僅是字體大小，還有屏幕寬度也在變化。因此，就像圖片解釋的那樣，可使用屏幕寬度的計算來獲得一個相應的比例，而後，乘以 font-size 的變化範圍 0.4rem，就能夠獲得咱們增長的字體大小了。而後，在最小 font-size 的基礎之上加上這個變化的範圍，就能夠獲得在對應屏幕寬度下的精準的 font-size了。

因此，使用 calc 能夠這樣寫：

@media (min-width: $min-screen) and (max-width: $max-screen) {
    article {
        font-size: calc($min-font-size + (1.8 - 1.4) * ((100vw - $min-screen) / (1200 - 600)));
    }
}複製代碼

注意，calc 函數在計算除法的時候，/ 右邊只能是數字，不能帶單位。* 要求至少一個參數是數字。

對這個式子我也解釋一下，能夠看到，其中有個表達式是 100vw - 600px，這是什麼意思呢？

轉換成文字：瀏覽器可視區域的寬度減去最小寬度。

其實理解起來很簡單，舉個例子：假設如今屏幕寬度爲 1000px，那麼，100vw - 600px 獲得的結果爲 400px，而後，除以 600，最後獲得的是 2 / 3。而後，這個值去乘以 0.4rem，那麼，這樣就能計算出增長的字體大小值了，而後加上 1.4rem，就能獲得最終的一個 font-size了。

因此，就這樣，咱們就對 font-size 實現了響應式。不用再經過各類屏幕大小的媒體查詢來變化了。

值得慶幸的是，此規則對於 line-height 一樣適用。

如下是完整的 SCSS 代碼：

$min-font-size: 1.4rem;
$max-font-size: 1.8rem;
$min-screen: 600px;
$max-screen: 1200px;

:root {
    font-size: 10px;
}

article {
    font-size: $min-font-size;
}

@media (min-width: $min-screen) and (max-width: $max-screen) {
    article {
        font-size: calc($min-font-size + (2 - 1.4) * ((100vw - $min-screen) / (1200 - 800)));
    }
}

@media (min-width: $max-screen) {
    article {
        font-size: $max-font-size;
    }
}複製代碼

---

References

Precise control over responsive typography

Flexible typography with CSS locks