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

時間 2019-11-08

標籤相關單位應用別說 css 相對欄目 CSS 简体版

原文原文鏈接

前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其中的第二章《Working with relative units》，書中對relative units的講解和舉例能夠說至關全面，看完以後發現本身並不太懂CSS相對單位，也但願分享給你們，因此有了這個譯文系列。（如有勘誤或翻譯建議，歡迎 Github PR ^_^）css

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

本文對應的章節目錄：git

2.4 視口相關單位（viewport-relative units）github
- CSS3
- 2.4.1 在font-size上使用vw
- 2.4.2 在font-size上使用calc()

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

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

視口（viewport） —— 在瀏覽器窗口中用來渲染頁面的可視區域，這不包括瀏覽器的地址欄、工具欄、狀態欄等（若是有的話）。

若是你不熟悉視口相關單位的話，在這裏簡單介紹一下。瀏覽器

vh —— 視口高度的1/100
vw —— 視口寬度的1/100
vmin —— 視區寬度或高度較小值的1/100（IE9支持的是vm）
vmax —— 視區寬度或高度較大值的1/100（在寫本書時，IE或者Edge都不支持）

舉個例子，50vw等於視口寬度的一半，而25vh等於視口高度的25%。vmin依賴二者（寬或高）的較小值，若是咱們須要確保一個元素無論在橫屏仍是豎屏下適應屏幕展現的話，這個屬性會頗有幫助：若是是橫屏，vmin的基準值是屏幕的高度，若是是豎屏，它的基準值是屏幕的寬度。less

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

[ 圖 2.10 若是把一個元素的寬高定義成90vmin，它總會展現成一個正方形，邊長稍小於屏幕的視口，無論它的尺寸或方向怎樣。 ]函數

在代碼片斷2.18能夠看到這個元素的樣式，渲染了一個適應屏幕尺寸的大正方形，無論瀏覽器的尺寸是多少。你能夠經過添加<div class="square">，再看看頁面效果。工具

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

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

若是想作一個大英雄圖片充滿屏幕的效果，視口相關長度最合適不過。你的圖片能夠在一個長條形的容器內，把圖片的高度設爲100vh，那它的高度就會跟視口高度同樣。

筆記

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

CSS3

本章提到的不少單位類型，其實並不在早期的CSS版本里（尤爲是rem和視口相關單位）。在這門語言一系列的更新迭代過程當中，它們慢慢被加進來，咱們將最新的版本稱做CSS3。

在二十世紀末二十一世紀初，在CSS規範的第一版發佈以後的很長一段時間，只有很小的改動。在1998年5月份，W3C（World Wide Web Consortium）發佈了CSS 2規範。不久以後，修正版本2中問題和缺陷的2.1版本開始了，CSS 2.1的工做持續了好多年，但並無添加什麼使人印象深入的特性。直到2011年4月份，版本2.1終於被確認爲「提議推薦標準」（Proposed Recommendation）。到這個時候，大多數瀏覽器對CSS 2.1的特性已經支持得很好了，在此基礎上，瀏覽器又努力地添加一些新的特性。這就是新規範CSS 3。

「3」是個非正式的版本號，實際上並無CSS3規範。相反，這個規範被拆成多個獨立的模塊，分別有獨立的版本號。background和border的規範已經從盒模型（box model）以及層疊與繼承（cascading and inheritance）規範中獨立出來。經過這種方式，W3C就能夠針對CSS某個模塊進行更新迭代，而不用同時更新其餘不相關的模塊的內容。在這些模塊規範裏，不少還停留在第3版本（如今叫「第3級」），但有的模塊（好比選擇器規範（selectors specification））已經到第4級，而其餘的模塊（好比flexbox）還在第1級。

這些新特性進入了人們的視野。咱們能夠看到在2009到2013年間，大量新的CSS特性涌進瀏覽器中。其中有如今比較出名的rem和視口相關單位，以及新的選擇器（new selectors）、媒體查詢（media queries）、網頁文字（web fonts）、圓形邊框（rounded borders）、動畫（animation）、變換（transitions）、變形（transformations）以及定義顏色的不一樣方式。然而，每一年的新特性的數量還在逐年穩定增加。

這意味着，咱們再也不只跟一個特定版本的CSS規範打交道。這是一套有生命的標準，每一個瀏覽器也在持續地支持新的特性，開發者會開始使用而後漸漸習慣它們。CSS4大概不會出現了，若是有的話，應該也只是個用於市場營銷的名詞。儘管這本書也會提到CSS3的新特性，但沒有必要把它們都搬出來，就整個網頁而言，這些都是CSS。

2.4.1 在font-size上使用vw

一個應用若是使用了視口相關單位，可能效果最不明顯的地方就是用在字號大小上。事實上，我發現把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()函數支持對2個或者更多個數值進行基礎的運算。這個函數對不一樣類型的單位間的運算尤爲有用。這個函數支持加（+）、減（-）、乘（*）和除以（/）。其中，加和減運算符左右必須留有空格，因此我建議咱們來培養一個習慣，老是在四個運算符的兩側都寫上空格，譬如calc(1em + 10px)。

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

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

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

如今，打開頁面，緩慢地改變瀏覽器的大小。你會發現，字號改變的過渡很平滑。0.5em在這裏表明的是字號的最小值，1vm則表明着響應式地往上累加。這樣基礎字號大小就在iPhone6的11.75px和1200px寬瀏覽器窗口的20px間縮放。你能夠根據本身的喜愛改變這些值。

你如今能夠實現響應式策略的核心邏輯而不須要添加一行媒體查詢的代碼。頁面上的全部元素能夠根據視口大小平滑縮放，再也不須要3或4個硬編碼的斷點。

（後一篇《無單位數字和行高》已同步發佈，瞭解一下 ^_^ ）

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

章節：

2.1 相對單位值的魔力
- 2.1.1 完美像素設計（pixel-perfect design）的掙扎
- 2.1.2 完美像素網頁的終結
- 像素（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 不帶單位的數字（unitless number）和行高（line-height）
2.6 自定義屬性（也叫「CSS變量」）
- 2.6.1 動態改變自定義屬性的值
- 2.6.2 經過JavaScript改變自定義屬性的值
- 2.6.3 初探自定義屬性
總結