基于视窗单位的排版
什么是視窗單位?
現在CSS中有關于視窗單位的可用種類主要有四種，他們是:
-
vw:視窗寬度的百分比
-
vh:視窗高度的百分比
-
vmin:當前較小的vw和vh
-
vmax:當前較大的vw和vh
在這種情況下，視窗，指的是瀏覽器屏幕。1vw就意味著1%的瀏覽器的寬度。100vw將意味著整個瀏覽器寬度。
視窗單位的好處在于當視窗大小改變時，他們會自動的重新計算其大小。當重新加載頁面，調整頁面大小或改變頁面方向時就會發生此現象。
因為視窗單位可以自動的重新計算，這讓創建一個始終占據四分之一頁面的組件變得十分輕松。
.component { ?width: 50vw;height: 50vh;background: rgba(255, 0, 0, 0.25)}
上面圖像顯示的就是視窗單位的縮影。現在讓我們回歸到這篇文章之中。
使用視窗單位進行排版
這里還有一個為什么要考慮使用視窗單位進行排版的原因 -?根據客戶端的瀏覽器，視窗單位會自動重新計算。這就意味著我們不需要顯式聲明媒體查詢的字體大小。
讓我們用一個例子清楚地說明這一點。
考慮下面的代碼，我在800px處將font-size的大小由16px?更改為?20px。
// Note: CSS are all written in SCSShtml {font-size: 16px; ?@media (min-width: 800px) {font-size: 20px;} }當你看著這段代碼時，你可以在800px視窗時，立馬告訴font-size將大小由16px更改為20px。這是我們為了良好的視覺效果經常做的事情。
但是，偶爾你也會遇到這種情況，在兩個斷點處你不得不額外增加一個媒體查詢以便在不同的設備上，排版依舊保持良好。
html {font-size: 16px; ?@media (min-width: 600px) {font-size: 18px;} ?@media (min-width: 800px) {font-size: 20px;} }雖然我們可以指定多個媒體查詢并相應設置多個字體大小，但是這通常矯枉過正，所以我們堅持三到四種尺寸大小。
但是不指定多個媒體查詢或者多個字體大小，你如何在不同情況下擁有相同效果呢?。
這時候視窗單位就要發揮它的作用了，在視窗單位中設置font-size屬性，你就可以很容易的獲取一樣的效果。
請考慮下面代碼的結果:
html { font-size: 3vw; }
是不是很神奇？
不過，正如你可以看到的，視窗單位太適應屏幕大小的改變。
如果你也將字體大小設置為3vw,在一個屏幕寬度為320px的設備(移動)上，你得到的文本大小將為10px。這時字體過小而不適合閱讀。另一方面，在一個屏幕寬度為1440px的設備(筆記本電腦)上，你得到的字體大小將為43px，這時，字體又太大了。
現在，我們給出了一個有趣的挑戰?- 馴服視窗字體的大小。
值得慶幸的是，這里有一個簡單的方法可以實現。我們可以設置一個最小的字體大小，然后在一個小視窗中通過多次使用calc()屬性縮放字體。
就像下面代碼所示:
html { font-size: calc(18px + 0.25vw) }這是不是看起來很酷?我第一次發現這種方法是在Mike Riethmuller的如何精確的控制響應式排版這篇文章之中。
不幸的是，我同時也意識到這種方法并不適用于所有的瀏覽器。比如，Mac上的Safari(當然Mike說盡管Windows適用)。
修補不足的方法十分簡單。我們在vw上可以結合使用百分比，以便Safari也可以實現字體縮放:
html { font-size: calc(112.5% + 0.5vw) }
Shwweeeeeet!在我們的代碼中是否可以真的一起擺脫em,rem和媒體查詢的使用？關于這一點，我迫不急切的想要知道答案！
我不得不克服的下一個挑戰是嘗試在視窗單位中用其他的排版元素(h1-h6)設置字體大小。
在視窗單位中設置其他的排版元素
我嘗試做的第一件事就是創建一個字體大小為?body?文本大小兩倍的<h1>元素。結果證實并不可以直接這么做:(
我試著將<html>中的font-size大小相乘于2，我發現這比本來的字體大小大了很多:
html { font-size: calc(112.5% + 0.25vw) }h1 { font-size: calc((112.5% + 0.25vw) * 2); }
發生這種情況的原因在于，在計算<h1>時我使用了基于百分比的font-size。當我繼承<html>中的font-size重新計算<h1>中的font-size時就會變得十分有效。
這時，如果我們添加一些數字就會變得容易想象一些。
比方說你現在的視窗大小為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)
到目前為止HTML計算是不是很好？太棒了！
我們將采用同樣的方式來解決<h1>的計算。這一次要特別注意112.5%的計算。
-
<h1>中112.5%計算出來相當于22.5px的font-size大小(112.5/100 * 20px)
-
0.25vw相當于2px(800px * 0.25 ÷ 100)
-
<h1>的font-size大小為49px((22.5px + 2px) * 2)
不幸的是，我們要尋找的正確的<h1>大小為body的font-size大小的兩倍或者說是40px。他們是不同的 :(
這里有兩種方式可以解決這個問題，因為我們知道錯誤的引起是由于<h1>繼承了<html>的font-size大小。
第一種解決的方法是在<h1>中將112.5%設置為100%:
h1 { font-size: calc((100% + 0.25vw) * 2) }第二種方法就是確保在元素之間不繼承字體的大小。
h1 { font-size: calc((100% + 0.25vw) * 2) }p { font-size: calc((100% + 0.25vw)) }這兩種解決方式都看起來十分變態。因此我不斷尋找更好的解決方法。
最終最好的方式就是恢復使用?rem?和?em。為什么要放棄發現的新單位呢？
html { font-size: calc(112.5% + 0.25vw) }h1 { font-size: 2em; }
既然我們談到了字體縮放問題，你可能會產生另外一個問題:"使用視窗單位時，垂直規律和模塊化會變得怎么樣呢？"
好，讓我們下面來談談他們。
視窗單位與垂直規律和模塊化
這是比較容易回答的。
你有沒有注意到視窗單位僅僅適用于設置<html>元素？其余一切還是使用rem和em來設置。
這意味著你仍然可以以同樣的方式使用em和rem單位去創建垂直規律和模塊化，就像我之前在我所知道的響應式排版一文中所說的。
什么都沒有改變！:)
Oh。在我們結束這篇文章之前還有一件事。
還有一個更大的我不得不克服的問題。就是我之前曾經提出的一個疑問:"在視窗大小為800px的情況下你如何計算vw使排版的單位大小為20px？"
這是一個很長的問題，化簡為一個單詞就是精度。換句話說，我怎樣才可以更精確的使用我想要的字體大小呢？
精度
其實，Mike已經幫我解決了這個問題。現在我只需要解釋一下這個公式的工作原理。
讓我們說說你想要的結果...
-
當視窗大小為600px時，font-size大小為18px
-
當視窗大小為1000px時，font-size大小為22px
首先，我們不得不將font-size(18px)轉化為百分比。第一部分的計算是這樣子的:calc(18/16 * 100%)(或者簡單的calc(112.5%))
接下來計算vw的數量。這部分的計算略微有點麻煩。
你可以通過考慮font-size(22-18)的差值來計算vw的值,除以視窗的寬度(1000-600),之后乘以100vw - smaller-viewport-width?(100vw - 600px)。
組合在一起就是:
html { ?font-size: calc(112.5% + 4 * (100vw - 600px) / 400) }剛開始的時候這可能有點復雜，但是一旦你知道其中的組成，你就可以簡化為Sass中的mixin。
Indrek Paas已經將上面公式轉化為一個簡單的Sass mixin。這里我很開心可以使用百分比而不是像素。
超級精度
這里，你如何實現在不同的斷點，獲取你想要的視窗單位，從而實現不同的縮放比率。
這里有一個解決方案；
html {font-size: 100%;// Scales by 1px for every 100px from 600px to 1000px ?@media (min-width: 600px) {font-size: calc(112.5% + 4 * (100vw - 600px) / 400)}// Scales by 0.5px for every 100px from 1000px to 2000px ?@media (min-width: 1000px) {font-size: calc(137.5% + 5 * (100vw - 1000px) / 1000)} }嘿，但是在現實中你不可能使用不同的比率進行縮放！這就意味著你會使用下面這個更加可為的方法:
html {font-size: 100%; ?// Scales by 1px for every 100px from 600px onwards@media (min-width: 600px) {font-size: calc(112.5% + 4 * (100vw - 600px) / 400)} ?// Sets font-size to 22px after a viewport of 1000px@media (min-width: 1000px) {font-size: calc(137.5%)} } 本文根據 @Zell 的《 Viewport Unit Based Typography 》所譯，整個譯文帶有我們自己的理解與思想，如果譯得不好或有不對之處還請同行朋友指點。如需轉載此譯文，需注明英文出處： http://zellwk.com/blog/viewport-based-typography/ 。總結
- 上一篇： 无线蓝牙耳机哪款好?半入耳真无线蓝牙耳机
- 下一篇： 日语中的不好意思、对不起是怎么表达的呀-