資訊專欄INFORMATION COLUMN
摘要：不過，使用來定義字體大小顯得不是很優雅，我們可以使用來定義我們的字體。我們把我們的變量定義和根元素的放在文件的頂部。，就這么一段代碼，我們就可以將字體大小的邊界值進行限制。
本文樣式代碼采用 SCSS。
那么多的文章講了響應式的網站如何布局，使用 CSS 如何實現，如何 Blah Blah 的。但是，我們都忘了很重要的一點——對字體大小的響應式控制。
現在的很多網站，從布局上來說，盡管是響應式的(當然，或許可以說成所謂響應式的)。但是，從字體上來說，卻不一定是響應式的。雖然，每個網站可能會通過某些方式(比如頻繁使用 @media )來讓自己的網站在不同的屏幕大小下顯示不同大小的字體，但是，這樣不能叫做響應式，這只是一種適應式的做法。
那么，怎么樣才能對我們的 font-size 實現真正的響應式呢？
我們需要做的主要有以下兩點：
1、制定一個最大的和最小的屏幕寬度值，我們的 font-size 應該是在這個屏幕范圍內平滑均勻的變化；
不可能讓字體大小一直不停的變化。試想一下，自己一直縮小或者方法瀏覽器，字體一直變小或者變大的場景。
2、制定最大和最小的 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，此處不做過多贅述。
使用 @media 對限制字體大小邊界值This is Header.
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.
上文中說過，在我們的屏幕寬度小于 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 的層疊的特性，后聲明的樣式會覆蓋掉先聲明的樣式，從而導致媒體查詢規則不起作用。
那么，要實現在這個屏幕寬度范圍內精確平滑的變化，肯定需要用到一點數學計算。
1、font-size 變化的范圍是 1.8rem - 1.4rem = 0.4rem；
2、屏幕寬度的變化范圍是 1200px - 600px = 600px；
3、最小的 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
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111527.html
摘要：值得注意的是，這個設置對使用或其他絕對單位定義的字號大小無效。事實上，提供了一個在和間的相對單位折中解決方案，而且更易于使用。圖使用相對單位和繼承字號的面板下面是模板，加到你的頁面吧。 showImg(https://segmentfault.com/img/bVbdOMr?w=920&h=450); 前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其...
摘要：原文地址作者摘要這是一篇年制作響應性網頁的快速教程。首先，我們要聲明需要更改或復用的變量然后，我們只需要在中使用它們就可以了。總之，變量可以定義為未來的響應式。 原文地址：https://medium.freecodecamp.org/how-to-make-responsiveness-super-simple-with-css-variables-8c90ebf80d7f 作者：...
摘要：本文主要介紹一些響應式布局容易忽略但又很重要的知識點。單位不僅僅可以用來設置字號，還可以設置任何盒模型的屬性，比如有一點優勢就是可以和媒體查詢配合，實現響應式布局運用場景如果我們做的頁面只在移動端訪問，這是因為不兼容低版本的瀏覽器。 一、前言 響應式Web設計可以讓一個網站同時適配多種設備和多個屏幕，可以讓網站的布局和功能隨用戶的使用環境（屏幕大小、輸入方式、設備/瀏覽器能力）而變化。...
閱讀 1798·2021-11-24 10:21
閱讀 1208·2021-09-22 15:25
閱讀 3170·2019-08-30 15:55
閱讀 708·2019-08-30 15:54
閱讀 3461·2019-08-30 14:20
閱讀 1659·2019-08-30 14:06
閱讀 638·2019-08-30 13:11
閱讀 3144·2019-08-29 16:43
