由于視口單位涉及到計(jì)算，有一段時(shí)間我是抵制在工作使用視口單位。但就在上周，我克服了心中的抵制情緒，開(kāi)始去了解視口單位在網(wǎng)頁(yè)排版中的使用。在深入介紹視口單位以及其在網(wǎng)頁(yè)排版中的工作原理時(shí)，先了解下有哪些常見(jiàn)的視口單位。

視口單位是什么？

在 CSS 規(guī)范中，有4種類(lèi)型的可用視口單位：

視口，即瀏覽器屏幕大小，1vw 等于瀏覽器寬度的 1%，100vw 即整個(gè)瀏覽器的寬度。

視口的單位大小會(huì)根據(jù)視口大小的改變自動(dòng)計(jì)算，視口大小的改變常發(fā)生于頁(yè)面加載、頁(yè)面縮放或者屏幕方向的改變(橫縱切換)。正因?yàn)槿绱耍瑒?chuàng)建一個(gè)大小總為視口四分之一大小的容器是非常容易滴：

.component { width: 50vw; height: 50vh; background: rgba(255, 0, 0, 0.25)}

將視口單位用于網(wǎng)頁(yè)排版

將視口單位用于網(wǎng)頁(yè)排版的唯一理由就是視口的單位大小會(huì)根據(jù)客戶(hù)端瀏覽器的視口大小自動(dòng)計(jì)算。也就是說(shuō)，我們不必明確地通過(guò)媒體查詢(xún)來(lái)聲明字體大小。舉個(gè)demo來(lái)簡(jiǎn)要說(shuō)明一下。

代碼如下，將斷點(diǎn)設(shè)置為 800px，字體大小從 16px 變?yōu)?20px：

// Note: CSS are all written in SCSShtml { font-size: 16px; @media (min-width: 800px) { font-size: 20px; }}

對(duì)于上述代碼，當(dāng)視口大小是 800px 時(shí)，字體會(huì)從 16px 突變 到 20px。在響應(yīng)式排版中，這是經(jīng)常采用的方式。有時(shí)，你會(huì)碰到在兩個(gè)斷點(diǎn)之間添加額外的媒體查詢(xún)來(lái)確保頁(yè)面排版適應(yīng)所有設(shè)備：

html { font-size: 16px; @media (min-width: 600px) { font-size: 18px; } @media (min-width: 800px) { font-size: 20px; }}

盡管這樣做能達(dá)到效果，但需要更多特定的媒體查詢(xún)規(guī)則和字體大小。通常，會(huì)選擇 3~4 中字體大小。

但是，如何不同媒體查詢(xún)或字體大小的設(shè)置來(lái)達(dá)到同樣的效果呢？

當(dāng)然是有滴，這就是視口單位的用處了。你可以用視口單位來(lái)表示字體大小：

html { font-size: 3vw; }

是不是很棒？一段簡(jiǎn)短的代碼就實(shí)現(xiàn)了適配。但也有明顯的缺點(diǎn)，就是視口的單位大小是根據(jù)設(shè)備屏幕的視口大小計(jì)算的，對(duì)于小屏幕設(shè)備(如寬度 320px 的手機(jī))，字體太小，難以閱讀；對(duì)于大屏幕設(shè)備(如寬度 1440px 的筆記本)，字體會(huì)變的非常大，同樣也會(huì)難以閱讀。

所以，現(xiàn)在面臨的一個(gè)有意思的挑戰(zhàn)是—怎么解決不同設(shè)備的視口寬度對(duì)視口單位計(jì)算的影響？一種簡(jiǎn)單地方式是設(shè)置 font-size 的最小值，然后通過(guò) calc() 屬性來(lái)動(dòng)態(tài)計(jì)算小屏幕設(shè)備上的字體大小值：

html { font-size: calc(18px + 0.25vw) }

參考 Mike Riethmuller 的 Precise control over responsive typography

但是，不是所有的瀏覽器都支持 calc() 的這種計(jì)算方式(px+vw)。解決方式也很簡(jiǎn)單，結(jié)合使用百分比和 vw 用于 calc 計(jì)算能獲得更好地瀏覽器支持：

html { font-size: calc(112.5% + 0.5vw) }

下一個(gè)需要克服的挑戰(zhàn)就是用視口單位來(lái)設(shè)置排版元素(h1-h6)的字體大小。

用視口單位設(shè)置其它排版元素的字體大小

首先，我創(chuàng)建一個(gè)

元素，將其字體大小設(shè)置為body 的兩倍：

html { font-size: calc(112.5% + 0.25vw) }h1 { font-size: calc((112.5% + 0.25vw) * 2); }

我試圖將 html 元素的字體大小乘以2，但并不可行，對(duì)于

，字體大小是基于百分比計(jì)算的。在字體大小繼承了 的大小之后，又重新計(jì)算了

的字體大小。

現(xiàn)在假設(shè)視口寬度是 800px，默認(rèn)的 font-size 是 16px：

對(duì)于 html 元素，112.5% 意味著 font-size 是 18px(112.5/100 * 16px)

0.25vw == 2px(800px * 0.25/100)

所以， html 的 font-size 的最終值是 20px(18px + 2px)

按照同樣的方法來(lái)計(jì)算 h1 元素的 font-size ，但需要特別注意的是此時(shí)百分比(112.5%)的相對(duì)計(jì)算量值：

對(duì)于 h1 元素，112.5% 意味著 font-size 是 22.5px(112.5/100 * 20px)

0.25vw == 2px(800px * 0.25/100)

所以， h1 的 font-size 的最終值是 49px((22.5px + 2px) * 2)

這與最初想把 h1 元素的 font-size 設(shè)置成 Body 的兩倍大小的想法相違背。但我們知道了造成差異的原因是由于 h1 繼承了 html 的 font-size，有兩種方式來(lái)解決這個(gè)問(wèn)題。

第一種方式就簡(jiǎn)單滴將 112.5% 改為 100%：

h1 { font-size: calc((100% + 0.25vw) * 2) }

第二種方式是確保 font-size 不被跨元素繼承：

h1 { font-size: calc((100% + 0.25vw) * 2) }p { font-size: calc((100% + 0.25vw)) }

這兩種方式看起來(lái)有點(diǎn) hack，看起來(lái)不爽，于是又繼續(xù)嘗試其它方法。最終，最干凈的方式是使用 Rem & Em :

html { font-size: calc(112.5% + 0.25vw) }h1 { font-size: 2em; }

既然講到了字體大小的計(jì)算，那接下來(lái)的問(wèn)題是： 視口單位的垂直和標(biāo)準(zhǔn)化計(jì)算是怎么樣的？

視口單位的垂直和標(biāo)準(zhǔn)化計(jì)算

這個(gè)相對(duì)比較容易回答。不知是否注意到，視口單位常僅被用于 html 元素？其它元素仍用 rem 和 em 作為計(jì)算的單位。

這就意味著，你仍然能使用 rem 和 em 用于視口單位的垂直和標(biāo)準(zhǔn)化計(jì)算，這和我之前在 Everything I Know about Responsive Typography 一文中討論的一樣。

結(jié)束這篇文章之前，最后一個(gè)需要談到的問(wèn)題是：要怎么樣去計(jì)算 vw 的值，才能在視口寬度是 800px 時(shí)，排版的字體大小為 20px？很多人問(wèn)到了這個(gè)問(wèn)題，因而，將這個(gè)問(wèn)題簡(jiǎn)化成一個(gè)詞就是—精確。換句話說(shuō)，如何才能字體大小更加精確？

精確

結(jié)果是，Mike 已經(jīng)替我解決了這個(gè)問(wèn)題，我只需要再簡(jiǎn)單解釋下計(jì)算方式。

假設(shè)你要處理下面兩種情況：

首先，我們必須將較小的 font-size 值轉(zhuǎn)為百分比。第一部計(jì)算是：calc(18/16 * 100%) (或者 calc(112.5%))。 接下來(lái)，計(jì)算出 vw 值。 這部分的計(jì)算略繁瑣:

1. 計(jì)算 font-size 的最大差值 v1(22-18=4)
2. 用 v1 除以視口寬度的最大差值 v2(1000-600)
3. 將上述結(jié)果再乘以 100vw – smaller-viewport-width(100vw – 600)

最終，結(jié)果如下：

html { font-size: calc(112.5% + 4 / 400 * (100vw - 600px) )}

開(kāi)始接觸可能會(huì)比較復(fù)雜，但是熟悉之后，你可以把它簡(jiǎn)化成 Sass 混入( simple sass mixin )。

原文參照

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com