css3的新單位使用詳解

來源:互聯網
上載者:User
這次給大家帶來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怪異盒模型和標準盒模型如何使用

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.