視口相關單位的應用 —— 別說你懂CSS相對單位

lbool 發(fā)布于2019-08-29 16:06 / 2416人閱讀

摘要：還有視口相關單位，依賴瀏覽器的視口大小來定義長度的。如果你不熟悉視口相關單位的話，在這里簡單介紹一下。筆記視口相關單位對于大多數(shù)瀏覽器還是一項比較新的特性，所以當你試圖把這個特性和其他樣式混搭時，有可能會有一些很奇怪的。

前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其中的第二章《Working with relative units》，書中對relative units的講解和舉例可以說相當全面，看完之后發(fā)現(xiàn)自己并不太懂CSS相對單位，也希望分享給大家，所以有了這個譯文系列。（若有勘誤或翻譯建議，歡迎 Github PR ^_^）

《別說你懂CSS相對單位》系列譯文：

如何更愉快地使用em

如何更愉快地使用rem

視口相關單位的應用 [本文]

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

CSS自定義屬性

本文對應的章節(jié)目錄：

2.4 視口相關單位（viewport-relative units）

CSS3

2.4.1 在font-size上使用vw

2.4.2 在font-size上使用calc()

2.4 視口相關單位（viewport-relative units）

你已經(jīng)學完em和rem了，它們都是以font-size為基準值的，但相對單位不只它們。還有視口相關單位，依賴瀏覽器的視口大小來定義長度的。

視口（viewport） —— 在瀏覽器窗口中用來渲染頁面的可視區(qū)域，這不包括瀏覽器的地址欄、工具欄、狀態(tài)欄等（如果有的話）。

如果你不熟悉視口相關單位的話，在這里簡單介紹一下。

vh —— 視口高度的1/100

vw —— 視口寬度的1/100

vmin —— 視區(qū)寬度或高度較小值的1/100（IE9支持的是vm）

vmax —— 視區(qū)寬度或高度較大值的1/100（在寫本書時，IE或者Edge都不支持）

舉個例子，50vw等于視口寬度的一半，而25vh等于視口高度的25%。vmin依賴兩者（寬或高）的較小值，如果我們需要確保一個元素不管在橫屏還是豎屏下適應屏幕展示的話，這個屬性會很有幫助：如果是橫屏，vmin的基準值是屏幕的高度，如果是豎屏，它的基準值是屏幕的寬度。

圖2.10展示了一個正方形的元素在不同屏幕尺寸下的視口的情況。寬和高的值都聲明為90vmin，也就是寬高較小值的90%。邊長的值等于，橫屏情況下高度的90%，或者豎屏情況下寬度的90%。

[ 圖 2.10 如果把一個元素的寬高定義成90vmin，它總會展示成一個正方形，邊長稍小于屏幕的視口，不管它的尺寸或方向怎樣。 ]

在代碼片段2.18可以看到這個元素的樣式，渲染了一個適應屏幕尺寸的大正方形，不管瀏覽器的尺寸是多少。你可以通過添加

，再看看頁面效果。

[ 代碼片段 2.18 邊長使用vmin的正方形元素 ]

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

如果想做一個大英雄圖片充滿屏幕的效果，視口相關長度最合適不過。你的圖片可以在一個長條形的容器內，把圖片的高度設為100vh，那它的高度就會跟視口高度一樣。

筆記

視口相關單位對于大多數(shù)瀏覽器還是一項比較新的特性，所以當你試圖把這個特性和其他樣式混搭時，有可能會有一些很奇怪的bug。詳情參考http://caniuse.com/#feat=viewport-units列表中的“已知問題（Known Issues）”

CSS3

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

2.4.1 在font-size上使用vw

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

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

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

2.4.2 在font-size上使用calc()

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

你會在下一個代碼片段中，使用calc()來計算vh單位和em單位的值。把你的樣式表中的上一段設定基礎字號大小的代碼去掉（及相關的媒體查詢代碼），添加以下代碼。

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

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

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

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

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

《別說你懂CSS相對單位》系列譯文：

如何更愉快地使用em

如何更愉快地使用rem

視口相關單位的應用 [本文]

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

CSS自定義屬性

章節(jié)：

2.1 相對單位值的魔力

2.1.1 完美像素設計（pixel-perfect design）的掙扎

2.1.2 完美像素網(wǎng)頁的終結

像素（pixel）、點（point）和pc（pica）

2.2 em和rem

2.2.1 對font-size使用em

當我們在一個元素內用em同時聲明font-size和其他屬性

字號收縮問題

2.2.2 對font-size使用rem

可用性：對font-size使用相對長度單位

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

2.3.1 設置一個合理的字號默認值

2.3.2 讓這個面板變得“響應式”

2.3.3 調整單個組件的大小

2.4 視口相關單位（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 動態(tài)改變自定義屬性的值

2.6.2 通過JavaScript改變自定義屬性的值

2.6.3 初探自定義屬性

總結

原著版權信息：

作者：Keith J.Grant
書籍：CSS in Depth
章節(jié)：Working with relative units

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

感謝你讀到這里，對上文若有任何疑問或建議，歡迎留言。

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

獨立博客：wuyuying.com
知乎ID：@Yuying Wu
Github：Yuying Wu

云服務器 GPU云服務器應用的是rem單位單位域名的郵箱數(shù)據(jù)的存儲單位存儲數(shù)據(jù)的基本單位

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/113526.html

無單位數(shù)字和行高 —— 別說你懂CSS相對單位

摘要：無單位數(shù)字和行高有一些屬性可以接收不帶單位的數(shù)值意思就是一個不帶長度單位的數(shù)字，如和等于，等于，如此類推。警告不帶單位的只可以表示長度單位和百分比的值，譬如和。段落繼承了的行高。長度有兩種類型絕對的和相對的。前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其中的第二章《Working with relative units》，書中對relative ...

Airmusic 2019-08-29 16:06 評論0 收藏0
CSS自定義屬性 —— 別說你懂CSS相對單位

摘要：前段時間試譯了的好書，其中的第二章，書中對的講解和舉例可以說相當全面，看完之后發(fā)現(xiàn)自己并不太懂相對單位，也希望分享給大家，所以有了這個譯文系列。 showImg(https://segmentfault.com/img/bVbdOMr?w=920&h=450); 前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其中的第二章《Working with r...

JinB 2019-08-29 16:13 評論0 收藏0
如何更愉快地使用rem —— 別說你懂CSS相對單位

摘要：值得注意的是，這個設置對使用或其他絕對單位定義的字號大小無效。事實上，提供了一個在和間的相對單位折中解決方案，而且更易于使用。圖使用相對單位和繼承字號的面板下面是模板，加到你的頁面吧。 showImg(https://segmentfault.com/img/bVbdOMr?w=920&h=450); 前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其...

Snailclimb 2019-08-30 15:54 評論0 收藏0
如何更愉快地使用em —— 別說你懂CSS相對單位

摘要：相對單位的值會根據(jù)外部影響因素的變化而變化。很自然，相對單位使用起來會比較困難。在本章中，我將揭開相對單位的神秘面紗。重點來了，使用相對單位聲明的值會由瀏覽器轉化為一個絕對值，我們稱之為計算值。 showImg(https://segmentfault.com/img/bVbdtsA); 前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其中的第二章《W...

gekylin 2019-08-30 15:54 評論0 收藏0