[ 代碼片段 2.18 邊長(zhǎng)使用vmin的正方形元素 ]

.square {
  width: 90vmin;
  height: 90vmin;
  background-color: #369;
}

如果想做一個(gè)大英雄圖片充滿屏幕的效果，視口相關(guān)長(zhǎng)度最合適不過(guò)。你的圖片可以在一個(gè)長(zhǎng)條形的容器內(nèi)，把圖片的高度設(shè)為100vh，那它的高度就會(huì)跟視口高度一樣。

筆記
視口相關(guān)單位對(duì)于大多數(shù)瀏覽器還是一項(xiàng)比較新的特性，所以當(dāng)你試圖把這個(gè)特性和其他樣式混搭時(shí)，有可能會(huì)有一些很奇怪的bug。詳情參考http://caniuse.com/#feat=viewport-units列表中的“已知問(wèn)題（Known Issues）”
CSS3
本章提到的很多單位類型，其實(shí)并不在早期的CSS版本里（尤其是rem和視口相關(guān)單位）。在這門語(yǔ)言一系列的更新迭代過(guò)程中，它們慢慢被加進(jìn)來(lái)，我們將最新的版本稱作CSS3。  
?  
在二十世紀(jì)末二十一世紀(jì)初，在CSS規(guī)范的初版發(fā)布之后的很長(zhǎng)一段時(shí)間，只有很小的改動(dòng)。在1998年5月份，W3C（World Wide Web Consortium）發(fā)布了CSS 2規(guī)范。不久之后，修正版本2中問(wèn)題和缺陷的2.1版本開始了，CSS 2.1的工作持續(xù)了好多年，但并沒(méi)有添加什么令人印象深刻的特性。直到2011年4月份，版本2.1終于被確認(rèn)為“提議推薦標(biāo)準(zhǔn)”（Proposed Recommendation）。到這個(gè)時(shí)候，大多數(shù)瀏覽器對(duì)CSS 2.1的特性已經(jīng)支持得很好了，在此基礎(chǔ)上，瀏覽器又努力地添加一些新的特性。這就是新規(guī)范CSS 3。  
?  
“3”是個(gè)非正式的版本號(hào)，實(shí)際上并沒(méi)有CSS3規(guī)范。相反，這個(gè)規(guī)范被拆成多個(gè)獨(dú)立的模塊，分別有獨(dú)立的版本號(hào)。background和border的規(guī)范已經(jīng)從盒模型（box model）以及層疊與繼承（cascading and inheritance）規(guī)范中獨(dú)立出來(lái)。通過(guò)這種方式，W3C就可以針對(duì)CSS某個(gè)模塊進(jìn)行更新迭代，而不用同時(shí)更新其他不相關(guān)的模塊的內(nèi)容。在這些模塊規(guī)范里，很多還停留在第3版本（現(xiàn)在叫“第3級(jí)”），但有的模塊（比如選擇器規(guī)范（selectors specification））已經(jīng)到第4級(jí)，而其他的模塊（比如flexbox）還在第1級(jí)。  
?  
這些新特性進(jìn)入了人們的視野。我們可以看到在2009到2013年間，大量新的CSS特性涌進(jìn)瀏覽器中。其中有現(xiàn)在比較出名的rem和視口相關(guān)單位，以及新的選擇器（new selectors）、媒體查詢（media queries）、網(wǎng)頁(yè)文字（web fonts）、圓形邊框（rounded borders）、動(dòng)畫（animation）、變換（transitions）、變形（transformations）以及定義顏色的不同方式。然而，每年的新特性的數(shù)量還在逐年穩(wěn)定增長(zhǎng)。  
?  
這意味著，我們不再只跟一個(gè)特定版本的CSS規(guī)范打交道。這是一套有生命的標(biāo)準(zhǔn)，每個(gè)瀏覽器也在持續(xù)地支持新的特性，開發(fā)者會(huì)開始使用然后漸漸習(xí)慣它們。CSS4大概不會(huì)出現(xiàn)了，如果有的話，應(yīng)該也只是個(gè)用于市場(chǎng)營(yíng)銷的名詞。盡管這本書也會(huì)提到CSS3的新特性，但沒(méi)有必要把它們都搬出來(lái)，就整個(gè)網(wǎng)頁(yè)而言，這些都是CSS。

一個(gè)應(yīng)用如果使用了視口相關(guān)單位，可能效果最不明顯的地方就是用在字號(hào)大小上。事實(shí)上，我發(fā)現(xiàn)把vh和vw用在字號(hào)上比元素的寬或者高更實(shí)用。

試想一下，如果把元素的font-size聲明為2vm，會(huì)怎么樣？臺(tái)式機(jī)屏幕寬是1200px，2vm等于24px（1200 2%）。而平板電腦的屏幕寬768px，2vm約等于15px（768 2%）。很棒的是，元素在兩個(gè)尺寸下縮放自如。這意味著這里并沒(méi)有一個(gè)突然的斷點(diǎn)，元素會(huì)隨著視口尺寸的增大而平滑增大。

不幸的是，24px對(duì)于大屏幕來(lái)說(shuō)有點(diǎn)太大了。而更糟糕的是，在iPhone6它直接縮小到7.5px。好消息是縮放生效了，而壞消息是極限情況的處理有點(diǎn)差。你可以通過(guò)CSS的方法calc()解決這個(gè)問(wèn)題。

calc()函數(shù)支持對(duì)2個(gè)或者更多個(gè)數(shù)值進(jìn)行基礎(chǔ)的運(yùn)算。這個(gè)函數(shù)對(duì)不同類型的單位間的運(yùn)算尤其有用。這個(gè)函數(shù)支持加（+）、減（-）、乘（*）和除以（/）。其中，加和減運(yùn)算符左右必須留有空格，所以我建議我們來(lái)培養(yǎng)一個(gè)習(xí)慣，總是在四個(gè)運(yùn)算符的兩側(cè)都寫上空格，譬如calc(1em + 10px)。

你會(huì)在下一個(gè)代碼片段中，使用calc()來(lái)計(jì)算vh單位和em單位的值。把你的樣式表中的上一段設(shè)定基礎(chǔ)字號(hào)大小的代碼去掉（及相關(guān)的媒體查詢代碼），添加以下代碼。

[ 代碼片段 2.19 在font-size中使用em和vh單位進(jìn)行calc()運(yùn)算 ]

:root {
  font-size: calc(0.5em + 1vw);
}

現(xiàn)在，打開頁(yè)面，緩慢地改變?yōu)g覽器的大小。你會(huì)發(fā)現(xiàn)，字號(hào)改變的過(guò)渡很平滑。0.5em在這里代表的是字號(hào)的最小值，1vm則代表著響應(yīng)式地往上累加。這樣基礎(chǔ)字號(hào)大小就在iPhone6的11.75px和1200px寬瀏覽器窗口的20px間縮放。你可以根據(jù)自己的喜好改變這些值。

你現(xiàn)在可以實(shí)現(xiàn)響應(yīng)式策略的核心邏輯而不需要添加一行媒體查詢的代碼。頁(yè)面上的所有元素可以根據(jù)視口大小平滑縮放，不再需要3或4個(gè)硬編碼的斷點(diǎn)。

（后一篇《無(wú)單位數(shù)字和行高》已同步發(fā)布，了解一下 ^_^ ）

《別說(shuō)你懂CSS相對(duì)單位》系列譯文：

如何更愉快地使用em

如何更愉快地使用rem

視口相關(guān)單位的應(yīng)用 [本文]

無(wú)單位數(shù)字和行高

CSS自定義屬性

章節(jié)：

2.1 相對(duì)單位值的魔力

2.1.1 完美像素設(shè)計(jì)（pixel-perfect design）的掙扎

2.1.2 完美像素網(wǎng)頁(yè)的終結(jié)

像素（pixel）、點(diǎn)（point）和pc（pica）

2.2 em和rem

2.2.1 對(duì)font-size使用em

當(dāng)我們?cè)谝粋€(gè)元素內(nèi)用em同時(shí)聲明font-size和其他屬性

字號(hào)收縮問(wèn)題

2.2.2 對(duì)font-size使用rem

可用性：對(duì)font-size使用相對(duì)長(zhǎng)度單位

2.3 停止使用像素思維去思考

2.3.1 設(shè)置一個(gè)合理的字號(hào)默認(rèn)值

2.3.2 讓這個(gè)面板變得“響應(yīng)式”

2.3.3 調(diào)整單個(gè)組件的大小

2.4 視口相關(guān)單位（viewport-relative units）

CSS3

2.4.1 在font-size上使用vw

2.4.2 在font-size上使用calc()

2.5 不帶單位的數(shù)字（unitless number）和行高（line-height）

2.6 自定義屬性（也叫“CSS變量”）

2.6.1 動(dòng)態(tài)改變自定義屬性的值

2.6.2 通過(guò)JavaScript改變自定義屬性的值

2.6.3 初探自定義屬性

總結(jié)

原著版權(quán)信息：
作者：Keith J.Grant  
書籍：CSS in Depth  
章節(jié)：Working with relative units

筆者 @Yuying Wu，前端愛好者 / 鼓勵(lì)師 / 新西蘭打工度假 / 鏟屎官。目前就職于某大型電商的B2B前端團(tuán)隊(duì)。

感謝你讀到這里，對(duì)上文若有任何疑問(wèn)或建議，歡迎留言。

如果你和我一樣喜歡前端，喜歡搗騰獨(dú)立博客或者前沿技術(shù)，或者有什么職業(yè)疑問(wèn)，歡迎關(guān)注我以及各種交流哈。

獨(dú)立博客：wuyuying.com
知乎ID：@Yuying Wu
Github：Yuying Wu