CSS3中如何充分使用視窗單位來布局

容易忽略的七個CSS非常有用的單位 http://www.111cn.net/cssdiv/css/87284.htm

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

介紹視窗(Viewport)單位

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

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

    vw——代表視窗(Viewport)的寬度為1%，在我們的例子裡50vw = 500px。
    vh——視窗高度的百分比 50vh = 400px。
    vmin——vmin的值是當前vw和vh中較小的值。在我們的例子裡因為是橫向模式，所以50vim = 400px。
    vmax——大尺寸的百分比。50vmax = 500px。

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

佔用頁面的整個高度

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

#elem{
    height: 100%;
}

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

#elem{
    height: 100vh;
}

這似乎是一個完美的全屏映像的英雄，而且看起來非常時尚。

子項目大小根據瀏覽器改變而不是父元素

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

#parent{
    width: 400px;
}
#child{
    /* This is equal to 100% of the parent width, not the whole page. */
    width: 100%;
}

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

#parent{
    width: 400px;
}
#child{
    /* This is equal to 100% of page, regardless of the parent size. */
    width: 100vw;
}


響應字型大小

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

響應垂直置中

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

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

#rectangle{
    width: 60vw;
    height: 60vh;
    margin: 20vh auto;
}


等寬列

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

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

.column-2{
    float: left;
    width: 50vw;
}
.column-4{
    float: left;
    width: 25vw;
}
.column-8{
    float: left;
    width: 12.5vw;
}


總結

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