CSS中如何使用視窗單位

視窗(viewport)單位已經有了好幾年了，但我們並沒有看到它被經常使用。它們現在正在被所有的主流瀏覽器所支援並提供獨特的功能使它在特定情況下非常有用，特別是那些涉及響應式的設計。

視窗(viewport)是你的瀏覽器實際顯示內容的區域——換句話說是你的不包括工具欄和按鈕的網頁瀏覽器。這些單位是vw,vh,vmin和vmax。它們都代表了瀏覽器（視窗(viewport)）尺寸的比例和視窗大小調整產生的規模改變。

比方說我們有乙個1000px（寬）和800px（高）的視窗(viewport)

你可以在任何乙個可以使用畫素值的地方使用它們，比如width,height,margin,font-size等等。它們將通過視窗大小的調整或旋轉裝置的瀏覽器來重新計算這些值。

每乙個前端開發人員都致力於這件事。你的第一直覺是這樣做：

#elem

然而，除非我們為html和body新增100%的高度，但只是這樣還是不行的，因為這樣的**並不優雅而且很有可能會破壞你的設計的其餘部分。使用vh就變得相當容易了，只需要為高度設定100vh，那它將永遠都是你視窗的高度。

#elem

這似乎是乙個完美的全屏影象的英雄，而且看起來非常時尚。

在某些情況下，你想要的是子元素的大小相對於視窗改變而不是父元素。同樣的，按照前面的例子，這樣是不行的：

#parent

#child

如果我們用vw來設定子元素，那麼它會簡單的溢位並採取網頁的全寬：

#parent

#child

視窗(viewport)單位也可以在文字中使用呢！在這個例子中我們使用vw設定字型大小來建立一行很棒的css響應式文字。拜拜fittext！

通過設定元素的width,height和margin的視窗(viewport)單位，你可以不使用任何其它技巧來設定居中。

這裡有乙個高度為60vh上下外邊距為20vh的矩形，它們加起來是100vh(60+2*20)，使它即便調整視窗大小也可以始終居中。

#rectangle

你可以使用視窗(viewport)單位來設定響應式網格。它們的行為類似於百分比但總是相對於視窗(viewport)的大小。所以你可以將它們放在乙個比視窗寬的父元素裡，但它仍然有網格來保持其應有的寬度。這樣來建立全屏滑塊可謂得心應手。

這項技術需要元素用float:left來對齊彼此相鄰的元素：

.column-2 .column-4

.column-8

視窗(viewport)單位有它的用途而且值得嘗試。它們易於理解，而且在某些情況下對於代替css更加難的解決方案或不可能實現的技術有非常大的幫助。