基于視口單位的網頁排版
在之前的兩篇關于構建模塊化的文章中，談到了 rem & em 和 響應式排版 ，而在文章的評論中，對基于視口單位的網頁排版抱有很大的想象空間。
由于視口單位涉及到計算，有一段時間我是抵制在工作使用視口單位。但就在上周，我克服了心中的抵制情緒，開始去了解視口單位在網頁排版中的使用。在深入介紹視口單位以及其在網頁排版中的工作原理時，先了解下有哪些常見的視口單位。
視口單位是什么？
在 CSS 規范中，有4種類型的可用視口單位：
- vw — 1vw 等于視口寬度的 1%
- vh — 1vh 等于視口高度的 1%
- vmin — vw 和 vh 中的較小值
- vmax — vw 和 vh 中的較大值
視口，即瀏覽器屏幕大小，1vw 等于瀏覽器寬度的 1%，100vw 即整個瀏覽器的寬度。
視口的單位大小會根據視口大小的改變自動計算，視口大小的改變常發生于頁面加載、頁面縮放或者屏幕方向的改變(橫縱切換)。正因為如此，創建一個大小總為視口四分之一大小的容器是非常容易滴：
.component {
width: 50vw;
height: 50vh;
background: rgba(255, 0, 0, 0.25)
}
將視口單位用于網頁排版
將視口單位用于網頁排版的唯一理由就是視口的單位大小會根據客戶端瀏覽器的視口大小自動計算。也就是說，我們不必明確地通過媒體查詢來聲明字體大小。舉個demo來簡要說明一下。
代碼如下，將斷點設置為 800px，字體大小從 16px 變為 20px：
// Note: CSS are all written in SCSS
html {
font-size: 16px;
@media (min-width: 800px) {
font-size: 20px;
}
}
對于上述代碼，當視口大小是 800px 時，字體會從 16px 突變 到 20px。在響應式排版中，這是經常采用的方式。有時，你會碰到在兩個斷點之間添加額外的媒體查詢來確保頁面排版適應所有設備：
html {
font-size: 16px;
@media (min-width: 600px) {
font-size: 18px;
}
@media (min-width: 800px) {
font-size: 20px;
}
}
盡管這樣做能達到效果，但需要更多特定的媒體查詢規則和字體大小。通常，會選擇 3~4 中字體大小。
但是，如何不同媒體查詢或字體大小的設置來達到同樣的效果呢？
當然是有滴，這就是視口單位的用處了。你可以用視口單位來表示字體大小：
html { font-size: 3vw; }
是不是很棒？一段簡短的代碼就實現了適配。但也有明顯的缺點，就是視口的單位大小是根據設備屏幕的視口大小計算的，對于小屏幕設備(如寬度 320px 的手機)，字體太小，難以閱讀；對于大屏幕設備(如寬度 1440px 的筆記本)，字體會變的非常大，同樣也會難以閱讀。
所以，現在面臨的一個有意思的挑戰是—怎么解決不同設備的視口寬度對視口單位計算的影響？一種簡單地方式是設置 font-size 的最小值，然后通過 calc() 屬性來動態計算小屏幕設備上的字體大小值：
html { font-size: calc(18px + 0.25vw) }
參考 Mike Riethmuller 的 Precise control over responsive typography
但是，不是所有的瀏覽器都支持 calc() 的這種計算方式(px+vw)。解決方式也很簡單，結合使用百分比和 vw 用于 calc 計算能獲得更好地瀏覽器支持：
html { font-size: calc(112.5% + 0.5vw) }
下一個需要克服的挑戰就是用視口單位來設置排版元素(h1-h6)的字體大小。
用視口單位設置其它排版元素的字體大小
首先，我創建一個 <h1> 元素，將其字體大小設置為body 的兩倍：
html { font-size: calc(112.5% + 0.25vw) }
h1 { font-size: calc((112.5% + 0.25vw) * 2); }
我試圖將 html 元素的字體大小乘以2，但并不可行，對于 <h1> ，字體大小是基于百分比計算的。在字體大小繼承了 <html> 的大小之后，又重新計算了 <h1> 的字體大小。
現在假設視口寬度是 800px，默認的 font-size 是 16px：
- 對于 html 元素，112.5% 意味著 font-size 是 18px(112.5/100 * 16px)
- 0.25vw == 2px(800px * 0.25/100)
- 所以， html 的 font-size 的最終值是 20px(18px + 2px)
按照同樣的方法來計算 h1 元素的 font-size ，但需要特別注意的是此時百分比(112.5%)的相對計算量值：
- 對于 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 設置成 Body 的兩倍大小的想法相違背。但我們知道了造成差異的原因是由于 h1 繼承了 html 的 font-size，有兩種方式來解決這個問題。
第一種方式就簡單滴將 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)) }
這兩種方式看起來有點 hack，看起來不爽，于是又繼續嘗試其它方法。最終，最干凈的方式是使用 Rem & Em :
html { font-size: calc(112.5% + 0.25vw) }
h1 { font-size: 2em; }
既然講到了字體大小的計算，那接下來的問題是： 視口單位的垂直和標準化計算是怎么樣的？
視口單位的垂直和標準化計算
這個相對比較容易回答。不知是否注意到，視口單位常僅被用于 html 元素？其它元素仍用 rem 和 em 作為計算的單位。
這就意味著，你仍然能使用 rem 和 em 用于視口單位的垂直和標準化計算，這和我之前在 Everything I Know about Responsive Typography 一文中討論的一樣。
結束這篇文章之前，最后一個需要談到的問題是：要怎么樣去計算 vw 的值，才能在視口寬度是 800px 時，排版的字體大小為 20px？很多人問到了這個問題，因而，將這個問題簡化成一個詞就是—精確。換句話說，如何才能字體大小更加精確？
精確
結果是，Mike 已經替我解決了這個問題，我只需要再簡單解釋下計算方式。
假設你要處理下面兩種情況：
- 視口寬度是 600px 時，font-size 是 18px
- 視口寬度是 1000px 時，font-size 是 20px
首先，我們必須將較小的 font-size 值轉為百分比。第一部計算是：calc(18/16 * 100%) (或者 calc(112.5%))。 接下來，計算出 vw 值。 這部分的計算略繁瑣:
- 計算 font-size 的最大差值 v1(22-18=4)
- 用 v1 除以視口寬度的最大差值 v2(1000-600)
- 將上述結果再乘以 100vw – smaller-viewport-width(100vw – 600)
最終，結果如下：
html {
font-size: calc(112.5% + 4 / 400 * (100vw - 600px) )
}
開始接觸可能會比較復雜，但是熟悉之后，你可以把它簡化成 Sass 混入( simple sass mixin )。
原文參照
來自： http://www.ido321.com/1675.html