CSS3中使用視窗單位來佈局的方法

視窗(Viewport)單位已經有了好幾年了，但我們並沒有看到它被經常使用。它們現在正在被所有的主流瀏覽器所支援並提供獨特的功能使它在特定情況下非常有用，特別是那些涉及響應式的設計。本文我們主要和大家分享CSS3中使用視窗單位來佈局的方法，希望能幫助大家更好的學習css3的知識。

<script>ec(2);</script>

介紹視窗(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;
}


    /* 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;### n-8{###    float: left;### ;###}############相關推薦：#############基於視窗單位的排版_html/css_WEB-ITnose######## #####五分鐘教你CSS Grid 佈局############CSS佈局有哪些技巧#######

以上是CSS3中使用視窗單位來佈局的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！