本文介紹了css3新單位vw、vh、vmin、vmax的使用詳解，分享給大家，具體如下:
1，vw、vh、vmin、vmax 的含義
（1）vw、vh、vmin、vmax 是一種視窗單位，也是相對單位。它相對的不是父節點或者頁面的根節點。而是由視窗（Viewport）大小來決定的，單位 1，代表類似於 1%。
視窗(Viewport)是你的瀏覽器實際顯示內容的地區—，換句話說是你的不包括工具列和按鈕的網頁瀏覽器。
（2）具體描述如下：
vw：視窗寬度的百分比（1vw 代表視窗的寬度為 1%）
vh：視窗高度的百分比
vmin：當前 vw 和 vh 中較小的一個值
vmax：當前 vw 和 vh 中較大的一個值
2，vw、vh 與 % 百分比的區別
（1）% 是相對於父元素的大小設定的比率，vw、vh 是視窗大小決定的。
（2）vw、vh 優勢在於能夠直接擷取高度，而用 % 在沒有設定 body 高度的情況下，是無法正確獲得可視地區的高度的，所以這是挺不錯的優勢。
3，vmin、vmax 用處
做移動頁面開發時，如果使用 vw、wh 設定字型大小（比如 5vw），在豎屏和橫屏狀態下顯示的字型大小是不一樣的。
由於 vmin 和 vmax 是當前較小的 vw 和 vh 和當前較大的 vw 和 vh。這裡就可以用到 vmin 和 vmax。使得文字大小在橫豎屏下保持一致。
4，瀏覽器安全色性
（1）案頭 PC
Chrome：自 26 版起就完美支援（2013年2月）
Firefox：自 19 版起就完美支援（2013年1月）
Safari：自 6.1 版起就完美支援（2013年10月）
Opera：自 15 版起就完美支援（2013年7月）
IE：自 IE10 起（包括 Edge）到現在還只是部分支援（不支援 vmax，同時 vm 代替 vmin）
（2）行動裝置
Android：自 4.4 版起就完美支援（2013年12月）
iOS：自 iOS8 版起就完美支援（2014年9月）
二、一個簡單的範例
1，頁面代碼
視窗（Viewport）單位除了可以用來設定元素的寬高尺寸，也可以在文本中使用。下面使用 vw 設定字型大小來實現響應式文字。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>hangge.com</title> <style> html, body, div, span, h1, h2, h3 { margin: 0; padding: 0; border: 0; } .demo { width: 100vw; font-size: 5vw; margin: 0 auto; background-color: #50688B; color: #FFF; } .demo2 { width: 80vw; font-size: 5vw; margin: 0 auto; background-color: #ff6a00; } .demo3 { width: 50vw; height: 50vh; font-size: 1vw; margin: 0 auto; background-color: #ff006e; color: #FFF; } </style> </head> <body> <div class="demo"> <h1>寬度100％, 字型5％</h1> </div> <div class="demo2"> <h2>寬度80％, 字型5％</h2> </div> <div class="demo3"> <h3>寬度50％, 高度50％, 字型1％</h3> </div> </body></html>
三、實現完整覆蓋的遮罩層
有時為了突出彈出框，或者避免頁面元素被點擊。我們需要一個覆蓋整個可視地區的半透明遮罩，這個使用 vw、vh 就可以很輕易地實現。
1，範例代碼
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>hangge.com</title> <style> html, body, div, span, button { margin: 0; padding: 0; border: 0; } button { width: 120px; height: 30px; color: #FFFFFF; font-family: "微軟雅黑"; font-size: 14px; background: #28B995; } #mask { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; background: #000000; opacity: 0.5; display: none; } </style> </head> <body> <button onclick="document.getElementById('mask').style.display='inline'">點擊顯示遮罩</button> <div id="mask" onclick="document.getElementById('mask').style.display='none'"/></div> </body></html>
四、實現置中顯示的彈出框
1，彈出框大小隨內容自適應
（1）範例
點擊退出鍵後，會顯示一個在整個螢幕上置中顯示的彈出框。
彈出框的大小根據內容的大小自適應（logo 圖片），同時彈出框後面還有個覆蓋整個螢幕的半透明遮罩層。
點擊關閉按鈕後，則隱藏彈出框。
（2）範例代碼
遮罩層使用 vw、vh 實現全屏覆蓋。彈出框添加到遮罩層中並置中。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>hangge.com</title> <script type="text/javascript" src="js/jquery.js"></script> <style> html, body, div, span, button { margin: 0; padding: 0; border: 0; } button { width: 120px; height: 30px; color: #FFFFFF; font-family: "微軟雅黑"; font-size: 14px; background: #28B995; } .dialog-container { display: none; width: 100vw; height: 100vh; background-color: rgba(0,0,0,.35); text-align: center; position: fixed; top: 0; left: 0; z-index: 10; } .dialog-container:after { display: inline-block; content: ''; width: 0; height: 100%; vertical-align: middle; } .dialog-box { display: inline-block; border: 1px solid #ccc; text-align: left; vertical-align: middle; position: relative; } .dialog-title { line-height: 28px; padding-left: 5px; padding-right: 5px; border-bottom: 1px solid #ccc; background-color: #eee; font-size: 12px; text-align: left; } .dialog-close { position: absolute; top: 5px; right: 5px; font-size: 12px; } .dialog-body { background-color: #fff; } </style> </head> <body> <button onclick="$('#dialogContainer').show();">點擊顯示彈出框</button> <div id="dialogContainer" class="dialog-container"> <div class="dialog-box"> <div class="dialog-title">置中彈出框</div> <a onclick="$('#dialogContainer').hide();" class="dialog-close">關閉</a> <div class="dialog-body"> <img src="logo.png" class="demo-image" /> </div> </div> </div> </body></html>
2，彈出框大小隨視窗大小改變
（1）範例
點擊退出鍵後，會顯示一個在整個螢幕上置中顯示的彈出框。
彈出框的大小不再由內容的大小決定，而是隨視窗大小改變（寬高均為螢幕可視地區的 80%）。
點擊關閉按鈕後，則隱藏彈出框。
（2）範例代碼
遮罩層使用 vw、vh 實現全屏覆蓋。而彈出框的尺寸位置同樣使用 vw、vh 設定。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>hangge.com</title> <script type="text/javascript" src="js/jquery.js"></script> <style> html, body, div, span, button { margin: 0; padding: 0; border: 0; } button { width: 120px; height: 30px; color: #FFFFFF; font-family: "微軟雅黑"; font-size: 14px; background: #28B995; } .dialog-container { display: none; width: 100vw; height: 100vh; background-color: rgba(0,0,0,.35); text-align: center; position: fixed; top: 0; left: 0; z-index: 10; } .dialog-box { top:10vh; left:10vw; width: 80vw; height: 80vh; text-align: left; position: absolute; border: 1px solid #ccc; display: flex; flex-direction: column; } .dialog-title { line-height: 28px; padding-left: 5px; padding-right: 5px; border-bottom: 1px solid #ccc; background-color: #eee; font-size: 12px; text-align: left; } .dialog-close { position: absolute; top: 5px; right: 5px; font-size: 12px; } .dialog-body { background-color: #fff; flex:1; overflow: auto; } </style> </head> <body> <button onclick="$('#dialogContainer').show();">點擊顯示彈出框</button> <div id="dialogContainer" class="dialog-container"> <div class="dialog-box"> <div class="dialog-title">置中彈出框</div> <a onclick="$('#dialogContainer').hide();" class="dialog-close">關閉</a> <div class="dialog-body"> <img src="logo.png" class="demo-image" /> </div> </div> </div> </body></html>
五、顯示大圖時限制其最大尺寸
我們還可以通過視圖單位來限制一些元素的最大寬度或高度，避尺寸過大而超出螢幕。
（1）點擊按鈕，在螢幕中央顯示原始圖片的大圖。
（2）如果圖片原始寬高均不超過螢幕寬高的 90%，則顯示圖片的預設大小。
（3）如果圖片原始寬高均超過螢幕寬高的 90%，則限制為螢幕的 90%，使其能夠完全顯示。
相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
html5怎樣做出圖片轉圈的動畫效果
用H5的WebGL如何在同一個介面做出json和echarts圖表
H5的語義化標籤新特性應該如何使用
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
