CSS視口單位:快速入門

yuyurenjie發表於2017-04-26
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不會列印元素

相關文章