資訊專欄INFORMATION COLUMN
摘要：不過，使用來定義字體大小顯得不是很優(yōu)雅，我們可以使用來定義我們的字體。我們把我們的變量定義和根元素的放在文件的頂部。，就這么一段代碼，我們就可以將字體大小的邊界值進(jìn)行限制。
本文樣式代碼采用 SCSS。
那么多的文章講了響應(yīng)式的網(wǎng)站如何布局，使用 CSS 如何實(shí)現(xiàn)，如何 Blah Blah 的。但是，我們都忘了很重要的一點(diǎn)——對字體大小的響應(yīng)式控制。
現(xiàn)在的很多網(wǎng)站，從布局上來說，盡管是響應(yīng)式的(當(dāng)然，或許可以說成所謂響應(yīng)式的)。但是，從字體上來說，卻不一定是響應(yīng)式的。雖然，每個網(wǎng)站可能會通過某些方式(比如頻繁使用 @media )來讓自己的網(wǎng)站在不同的屏幕大小下顯示不同大小的字體，但是，這樣不能叫做響應(yīng)式，這只是一種適應(yīng)式的做法。
那么，怎么樣才能對我們的 font-size 實(shí)現(xiàn)真正的響應(yīng)式呢？
我們需要做的主要有以下兩點(diǎn)：
1、制定一個最大的和最小的屏幕寬度值，我們的 font-size 應(yīng)該是在這個屏幕范圍內(nèi)平滑均勻的變化；
不可能讓字體大小一直不停的變化。試想一下，自己一直縮小或者方法瀏覽器，字體一直變小或者變大的場景。
2、制定最大和最小的 font-size，屏幕大小小于最小的屏幕寬度值的時候，應(yīng)用最小的 font-size，反之，應(yīng)用最大的 font-size；
OK，計(jì)劃制定好了，那么，應(yīng)該如何實(shí)施呢？我們需要用到哪些技術(shù)呢？
其實(shí)要用到的技術(shù)不多，只是，我們需要把腦子轉(zhuǎn)一下。
@media：CSS Level 3 提供的媒體查詢，只要做過響應(yīng)式，或者任何適應(yīng)屏幕功能的肯定用過這個屬性。所以，在此不過多解釋此屬性，詳細(xì)可查看 @media | MDN
vw：Viewport 單位，1vw 相當(dāng)于屏幕寬度的百分之一。此處也不過多解釋，詳細(xì)可查看 length | CSS
calc：這是 CSS 提供的一個非常強(qiáng)大的屬性，可以用來動態(tài)計(jì)算 CSS 的值。我們的功能主要就是通過這個函數(shù)來實(shí)現(xiàn)。詳細(xì)可查看 calc | MDN
OK，需要的技術(shù)也齊全了。那么，現(xiàn)在就來一步一步實(shí)現(xiàn)。
定義變量按照上文中所說的計(jì)劃那樣，我們需要定義四個值，他們分別是最小屏幕寬度，最大屏幕寬度，最小字體，最大字體。
$min-font-size: 14px; $max-font-size: 18px; $min-screen: 600px; $max-screen: 1200px;
不過，使用 px 來定義字體大小顯得不是很優(yōu)雅，我們可以使用 rem 來定義我們的字體。那么，這時候，就需要先對網(wǎng)站的根元素設(shè)置字體大小了。
:root {
font-size: 10px;
}
然后，再來更新我們的變量。
$min-font-size: 1.4rem; $max-font-size: 1.8rem; $min-screen: 600px; $max-screen: 1200px;
我們把我們的變量定義和根元素的 font-size 放在文件的頂部。在這里，我們就不寫那些相關(guān)的 reset 等樣式了。
加入測試內(nèi)容起了個好頭，然后進(jìn)行下一步，很簡單，寫我們的 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。這個功能實(shí)現(xiàn)起來很簡單，只需要應(yīng)用相應(yīng)的一小段媒體查詢就行了。
@media (min-width: $max-screen) {
article {
font-size: $max-font-size;
}
}
@media (max-width: $min-screen) {
article {
font-size: $min-font-size;
}
}
OK，就這么一段代碼，我們就可以將字體大小的邊界值進(jìn)行限制。在屏幕寬度小于或者大于對應(yīng)的屏幕寬度值的時候，我們的字體大小都會保持在一個恒定的值。
那么，邊界限制做好了，接下來就是要實(shí)現(xiàn)真正的響應(yīng)式了。怎么說呢？我們要讓我們的 font-size 在 600px ~ 1200px 的屏幕寬度范圍內(nèi)平滑的變化。當(dāng)然，這還不夠，并不是說，只是給 font-size 設(shè)置一個百分比或者任何其他的相對單位，然后讓這個字體能夠在放大縮小屏幕的同時也能夠放大縮小。我們要做的，是要通過精確的大小控制來實(shí)現(xiàn)響應(yīng)式。
使用 calc 函數(shù)實(shí)現(xiàn)字體大小的響應(yīng)式仔細(xì)看看上文中對字體大小邊界值的限制的代碼，已經(jīng)有兩個 @media 了，在這個部分，我們肯定還要加一個 @media，是不是顯得有點(diǎn)多余？所以，我們可以稍微精簡一下。
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 其實(shí)就夠了。對于不在媒體查詢范圍內(nèi)的，只需要設(shè)置一個默認(rèn)值就行了。但是，要注意的是，這個默認(rèn)值一定要寫在兩個媒體查詢規(guī)則的前面。否則，會由于 CSS 的層疊的特性，后聲明的樣式會覆蓋掉先聲明的樣式，從而導(dǎo)致媒體查詢規(guī)則不起作用。
那么，要實(shí)現(xiàn)在這個屏幕寬度范圍內(nèi)精確平滑的變化，肯定需要用到一點(diǎn)數(shù)學(xué)計(jì)算。
1、font-size 變化的范圍是 1.8rem - 1.4rem = 0.4rem；
2、屏幕寬度的變化范圍是 1200px - 600px = 600px；
3、最小的 font-size 是 1.4rem。那么，屏幕寬度只要大于 600px，這個值肯定會增加，同時，只要屏幕寬度達(dá)到 1200px，這個值也達(dá)到 1.8rem，然后便不再變化；
可以看下圖：
比如，我們現(xiàn)在有三種屏幕寬度，分別是 600px，1000px，1200px。那么，仔細(xì)觀察左邊的參考線，我們將最小的那個屏幕寬度去掉，相當(dāng)于就剩下了兩個值，一個是 a，一個是 b。
由于 1200px 是我們設(shè)置的屏幕寬度的最大值，那么，也就是說，b 的變化范圍最大也就是 a 的長度。通俗一點(diǎn)說就是，可以把 a 和 b 看成進(jìn)度條，a 為 100% 的長度，b 為不斷增加或者減少的長度。所以，這里就存在了一個比例值，當(dāng) b 為 0 的時候，這個比例也為 0，當(dāng) b 為 100% 的時候，這個比例就是 1。
那么，按照這樣的思路，轉(zhuǎn)換到對應(yīng) font-size 的變化：變化范圍是 0.4rem，這是分母，那么，分子該如何計(jì)算呢？我們怎么知道字體增加了多少呢？
此處肯定是沒有減少的。我們是在 600px ~ 1200px 之間變化的，最小的字體為 1.4rem，無論怎么算，字體大小都不會再減小了。
所以，此處還有一個小小的轉(zhuǎn)換。想一想，我們變化的不只是字體大小，還有屏幕寬度也在變化。所以，就像圖片解釋的那樣，可以使用屏幕寬度的計(jì)算來得到一個相應(yīng)的比例，然后，乘以 font-size 的變化范圍 0.4rem，就可以得到我們增加的字體大小了。然后，在最小 font-size 的基礎(chǔ)之上加上這個變化的范圍，就可以得到在對應(yīng)屏幕寬度下的精準(zhǔn)的 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 函數(shù)在計(jì)算除法的時候，/ 右邊只能是數(shù)字，不能帶單位。* 要求至少一個參數(shù)是數(shù)字。
對這個式子我也解釋一下，可以看到，其中有個表達(dá)式是 100vw - 600px，這是什么意思呢？
轉(zhuǎn)換成文字：瀏覽器可視區(qū)域的寬度減去最小寬度。
其實(shí)理解起來很簡單，舉個例子：假設(shè)現(xiàn)在屏幕寬度為 1000px，那么，100vw - 600px 得到的結(jié)果為 400px，然后，除以 600，最后得到的是 2 / 3。然后，這個值去乘以 0.4rem，那么，這樣就能計(jì)算出增加的字體大小值了，然后加上 1.4rem，就能得到最終的一個 font-size了。
所以，就這樣，我們就對 font-size 實(shí)現(xiàn)了響應(yīng)式。不用再通過各種屏幕大小的媒體查詢來變化了。
值得慶幸的是，此規(guī)則對于 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
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/111527.html
摘要：響應(yīng)式布局的概念響應(yīng)式布局，即，在實(shí)現(xiàn)不同屏幕分辨率的終端上瀏覽網(wǎng)頁的不同展示方式?？蚣軐?shí)現(xiàn)響應(yīng)式布局利用中柵格系統(tǒng)可以簡單實(shí)現(xiàn)響應(yīng)式布局，這里就需要去理解一下啥是柵格系統(tǒng)代表在端上顯示在一行的個柵欄，也就是一半。 響應(yīng)式布局的概念 響應(yīng)式布局，即 Responsive design，在實(shí)現(xiàn)不同屏幕分辨率的終端上瀏覽網(wǎng)頁的不同展示方式。通過響應(yīng)式設(shè)計(jì)能使網(wǎng)站在手機(jī)和平板電腦上有更好的瀏...
摘要：值得注意的是，這個設(shè)置對使用或其他絕對單位定義的字號大小無效。事實(shí)上，提供了一個在和間的相對單位折中解決方案，而且更易于使用。圖使用相對單位和繼承字號的面板下面是模板，加到你的頁面吧。 showImg(https://segmentfault.com/img/bVbdOMr?w=920&h=450); 前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其...
摘要：原文地址作者摘要這是一篇年制作響應(yīng)性網(wǎng)頁的快速教程。首先，我們要聲明需要更改或復(fù)用的變量然后，我們只需要在中使用它們就可以了?？傊?，變量可以定義為未來的響應(yīng)式。 原文地址：https://medium.freecodecamp.org/how-to-make-responsiveness-super-simple-with-css-variables-8c90ebf80d7f 作者：...
摘要：本文主要介紹一些響應(yīng)式布局容易忽略但又很重要的知識點(diǎn)。單位不僅僅可以用來設(shè)置字號，還可以設(shè)置任何盒模型的屬性，比如有一點(diǎn)優(yōu)勢就是可以和媒體查詢配合，實(shí)現(xiàn)響應(yīng)式布局運(yùn)用場景如果我們做的頁面只在移動端訪問，這是因?yàn)椴患嫒莸桶姹镜臑g覽器。 一、前言 響應(yīng)式Web設(shè)計(jì)可以讓一個網(wǎng)站同時適配多種設(shè)備和多個屏幕，可以讓網(wǎng)站的布局和功能隨用戶的使用環(huán)境（屏幕大小、輸入方式、設(shè)備/瀏覽器能力）而變化。...
閱讀 1875·2021-11-24 10:21
閱讀 1304·2021-09-22 15:25
閱讀 3224·2019-08-30 15:55
閱讀 766·2019-08-30 15:54
閱讀 3527·2019-08-30 14:20
閱讀 1713·2019-08-30 14:06
閱讀 692·2019-08-30 13:11
閱讀 3244·2019-08-29 16:43
