這次給大家帶來css3的新單位使用詳解,css3新單位使用的注意事項有哪些,下面就是實戰案例,一起來看一下。
本文介紹了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, p, 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> <p class="demo"> <h1>寬度100%, 字型5%</h1> </p> <p class="demo2"> <h2>寬度80%, 字型5%</h2> </p> <p class="demo3"> <h3>寬度50%, 高度50%, 字型1%</h3> </p> </body></html>
2,
三、實現完整覆蓋的遮罩層
有時為了突出彈出框,或者避免頁面元素被點擊。我們需要一個覆蓋整個可視地區的半透明遮罩,這個使用 vw、vh 就可以很輕易地實現。
1,範例代碼
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>hangge.com</title> <style> html, body, p, 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> <p id="mask" onclick="document.getElementById('mask').style.display='none'"/></p> </body></html>
2,
四、實現置中顯示的彈出框
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, p, 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> <p id="dialogContainer" class="dialog-container"> <p class="dialog-box"> <p class="dialog-title">置中彈出框</p> <a onclick="$('#dialogContainer').hide();" class="dialog-close">關閉</a> <p class="dialog-body"> <img src="logo.png" class="demo-image" /> </p> </p> </p> </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, p, 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> <p id="dialogContainer" class="dialog-container"> <p class="dialog-box"> <p class="dialog-title">置中彈出框</p> <a onclick="$('#dialogContainer').hide();" class="dialog-close">關閉</a> <p class="dialog-body"> <img src="logo.png" class="demo-image" /> </p> </p> </p> </body></html>
五、顯示大圖時限制其最大尺寸
我們還可以通過視圖單位來限制一些元素的最大寬度或高度,避尺寸過大而超出螢幕。
1,
(1)點擊按鈕,在螢幕中央顯示原始圖片的大圖。
(2)如果圖片原始寬高均不超過螢幕寬高的 90%,則顯示圖片的預設大小。
(3)如果圖片原始寬高均超過螢幕寬高的 90%,則限制為螢幕的 90%,使其能夠完全顯示。
2,範例代碼
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>hangge.com</title> <script type="text/javascript" src="js/jquery.js"></script> <style> html, body, p, 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; text-align: left; vertical-align: middle; position: relative; } .demo-image { max-width: 90vw; max-height: 90vh; } </style> </head> <body> <button onclick="$('#dialogContainer').show();">點擊顯示大圖</button> <p id="dialogContainer" class="dialog-container" onclick="$('#dialogContainer').hide();"> <p class="dialog-box"> <img src="image.jpg" class="demo-image" /> </p> </p> </body></html>
六、實現 Word 文檔頁面效果
1,
(1)使用 vh 單位,我們可把 web 頁面做得像 Office 文檔那樣,一屏正好一頁。改變瀏覽器視窗尺寸,每頁的大小也會隨之變化。
(2)拖動捲軸,我們可以一直往下看到最後一頁。
2,範例代碼
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>hangge.com</title> <script type="text/javascript" src="js/jquery.js"></script> <style> html, body, p, span, button { margin: 0; padding: 0; border: 0; } body { background-color: #789BC9; } page { display: block; height: 98vh; width: 69.3vh; margin: 1vh auto; padding: 12vh; border: 1px solid #646464; box-shadow: 0 0 15px rgba(0,0,0,.75); box-sizing: border-box; background-color: white; position: relative; } page:after { content: attr(data-page); color: graytext; font-size: 12px; text-align: center; bottom: 4vh; position: absolute; left: 10vh; right: 10vh; } a { color: #34538b; font-size: 14px; } </style> <script type="text/javascript"> $(document).ready(function(){ var lenPage = $("page").length; //自動添加每頁底部的頁碼 $("page").each(function(i){ $(this).attr("data-page", "第 "+ (i+1) +" 頁,共 "+ lenPage +" 頁"); }); }); </script> </head> <body> <page><a href="http://hangge.com">歡迎訪問 hangge.com</a></page> <page></page> <page></page> </body></html>
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
css3的動畫序列animation
CSS怪異盒模型和標準盒模型如何使用