CSS視口單位:快速入門

翻譯自CSS Viewport Units: A Quick Start。此文章簡單介紹了視口單位及其應用，用於提高你們css知識的廣度

單位意義

CSS中有四個基於視口單位，分別爲vh、vw、vmin和vmax。

• 視口高度（vh）- 這個單位表示視口的高度。1vh等於視口高度的1%；
• 視口寬度（vw）-這個單位表示視口的寬度。1vw等於視口寬度的1%；
• 視口最小值（vmin）- 這個單位表示視口的更小尺寸。若是視口高度小於寬度，1vmin等於視口高度1%。一樣，若是寬度小於高度，1vmin表明視口寬度1%。
• 視口最大值（vmax）-這個單位表示視口的更大尺寸。若是視口高度大於寬度，1vmax等於視口高度1%。一樣，若是寬度大於高度，1vmax表明視口寬度1%。

在不一樣情形下，這些單位的值表明什麼

• 若是視口寬1200px，高1000px。則10vw值爲120px，10vh爲100px。由於寬度大於高度，10vmax等於120px，10vmin等於100px。
• 若是如今設備旋轉，寬爲1000px，高1200px。則10vw值爲100px，10vh爲120px。10vmax仍等於120px，由於高度仍大於寬度，10vmin等於100px。
• 若是從新設計窗口以致於視口寬1000px，高800px，則10vw值爲100px，10vh爲80px。由於寬度大於高度，10vmax等於100px，10vmin等於80px。

在這一點上，視口單位也許小於百分數。然而，他們是不一樣的，就百分數而言，子元素寬度和高度取決於其父元素。

如上面例子，第一個子元素被設爲父元素寬度的80%。第二個子元素爲寬度的80vw，而其寬於父元素

視口單位的應用

由於這些單位基於視口尺寸，因此在相對於視口設置元素的寬度和高度時，使用它們很是方便。

全屏背景圖片或部分

設置元素的背景圖片充滿屏幕這種方式很常見。一樣，你也許想設計一個網站，其產品或服務的部分覆蓋整個屏幕。這樣狀況下，你能夠設置響應元素寬度爲100%，高爲100vh。

舉個例子，

<div class="fullscreen a">
  <p>a<p>
</div>複製代碼

你能夠使用如下CSS來實現背景圖片部分：

.fullscreen {
  width: 100%;
  height: 100vh;
  padding: 40vh;
}

.a {
  background: url('path/to/image.jpg') center/cover;
}複製代碼

創造完美適應的標題

你也許聽過或使用過FitText插件。能夠使用此插件縮放標題，他們會佔據父元素的寬度。正如上文提過，視口單位的值會基於視口尺寸改變。這就意味着若是你使用視口單位設置標題的font-size，會很完美適應屏幕。不管視口寬度何時改變，瀏覽器會恰當地縮放標題。所要作就是計算出就視口單位而言font-size初始值。

設置font-size主要問題是文本大小會基於視口改變。例如，font-size值爲8vw，則屏幕寬度1200px時，font-size爲96px；寬度爲400px，值爲33px；寬度爲1920px時，值爲154px。這就會讓文本太大或過小而沒法閱讀。能夠閱讀《基於排版的視口單位》這篇文章，結合calc()函數，設置剛好的文本大小

居中元素

當想把元素放在屏幕中央時，能夠使用視口單位。在知道元素高度狀況下，設置margin頭部和底部屬性等於[(100-height)/2]vh

.centered {
  width: 60vw;
  height: 70vh;
  margin: 15vh auto;
}複製代碼

注意事項

使用視口單位時，須要注意一些事情。

注意當使用視口單位設置元素寬度時，由於當根本元素的overflow屬性設爲auto時，瀏覽器會假設滾動條不存在，會形成元素寬度大於你所期待的。

舉個例子

div {
  height: 50vh;
  width: 50vw;
  float: left;
}複製代碼

正常狀況下，你期待每一個div元素佔據屏幕的四分之一，而後每一個元素寬度是基於沒有滾動條下計算的。因此其寬度會大於。

解決辦法是設置寬度爲50%。結論是當設置塊級元素寬度應使用百分數。

一樣問題也會發生在移動端，由於地址欄出現與否取決於用戶是否在滾動。會致使視口高度改變，用戶在看內容時會嚇一跳。

瀏覽器支持

在caniuse數據顯示，主要的瀏覽器都支持這些單位。然而，仍有一些bug和問題須要注意。例如，IE9支持vm而不是vmin，IE10+/Edge不支持vmax單位，一樣當使用視口單位，Chrome不會打印元素