2015年4月13日 星期一

[筆記] 好用的css 3新單位vh vw ─ 讓你的圖片可以隨著螢幕大小而不同


有時候我們希望背景圖片也可以跟著螢幕的大小而改變,這時候,在CSS3中的vh、vm這兩個新單位就會非常方便使用。


一般來說,我們常會使用百分比(%)、畫素(px),讓我們比較一下%、px、vh/vm,這幾個功能上有什麼不同的效果。

<html>
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style>
        .outer{
            background-color: rgba(92, 92, 92, 0.6);
        }
        .inner{
            margin:auto;
            background-color: #f4f405;
            width:100(輸入不同單位);
            height:100(輸入不同單位);
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="inner">
    </div>
</div>

</body>
</html>

我先建立兩個div,然後外面(outer)包住裡面(inner);outer我用灰色,順便可以看出,inner的設定會怎麼樣影響到outer;最後在inner這個css樣式的地方,分別填入不同的單位。

使用px

在單位的地方填入px,很容易理解,網頁上就會呈現一個100px*100px的正方形,當我們縮放螢幕的時候,這個正方形並不會隨著變動


使用%


使用%的時候,呈現的結果會是空白的,因為我們的div內並沒有任何內容,所以即使設定為100%,還是不會顯示出任何東西。


使用vh、vw


vh代表的是view height,也就是螢幕可視範圍高度的百分比;vw表示的是view width,也就是螢幕可是範圍寬度的百分比。
這兩個單位的使用上和百分比很類似,當我填100vh和100vw時,意思就是我的這個div要是整個螢幕的可是範圍,所以你會看到,瀏覽器全部都是黃色的,而且很重要的是,這個區塊會隨著瀏覽器的縮放而改變。


如果我填的是30vh和30vw,表示這個div要占我的可視範圍的30%,因為它會隨著你的網頁縮放而改變,所以它一定會是正方形的,只有當你視窗的長和寬比例為1:1時,它才會是正方形的。

這個方形的長度會隨著你的視窗而改變,但是因為我輸入的是30,所以都會是30%。

這時候,如果我們希望畫出一個可以隨著視窗大小而改變的正方形時,我們只要把長和寬都設成一樣的單位就可以了,例如width:20vw; height:20vw。

這時候,螢幕上就會always呈現出一個寬和長,都是可視範圍20%的正方形。



這樣的單位有什麼好用的地方呢?

有些時候,特別是在設計自適應性網頁(RWD)時我們會希望我們的圖片隨著螢幕的大小而改變,這時候我們就可以利用到這兩個新的單位

vmin和vmax

另外,還有一個補充的單位是vmin,這個的意思是幫我抓取「長或寬較小的那個的百分比」,另一個相對的就是vmax意思就是抓取「長或寬較大的那個的百分比」。

透過這些單位,就可以更容易設計可隨視窗大小變動的圖片或按鍵。

參考資料


Share:

0 意見:

張貼留言