CSS3 - 新單位vw、vh、vmin、vmax使

CSS3 - 新單位vw、vh、vmin、vmax使用詳解（附樣例）

px、em 這樣的長(zhǎng)度單位大家肯定都很熟悉，前者為絕對(duì)單位，后者為相對(duì)單位。CSS3 又引入了新單位：vw、vh、vmin、vmax。下面對(duì)它們做個(gè)詳細(xì)介紹。

一、基本說(shuō)明

1，vw、vh、vmin、vmax 的含義

（1）vw、vh、vmin、vmax 是一種視窗單位，也是相對(duì)單位。它相對(duì)的不是父節(jié)點(diǎn)或者頁(yè)面的根節(jié)點(diǎn)。而是由視窗（Viewport）大小來(lái)決定的，單位 1，代表類(lèi)似于 1%。

視窗(Viewport)是你的瀏覽器實(shí)際顯示內(nèi)容的區(qū)域—，換句話說(shuō)是你的不包括工具欄和按鈕的網(wǎng)頁(yè)瀏覽器。

（2）具體描述如下：

vw：視窗寬度的百分比（1vw 代表視窗的寬度為 1%）
vh：視窗高度的百分比
vmin：當(dāng)前 vw 和 vh 中較小的一個(gè)值
vmax：當(dāng)前 vw 和 vh 中較大的一個(gè)值

2，vw、vh 與 % 百分比的區(qū)別

（1）% 是相對(duì)于父元素的大小設(shè)定的比率，vw、vh 是視窗大小決定的。

（2）vw、vh 優(yōu)勢(shì)在于能夠直接獲取高度，而用 % 在沒(méi)有設(shè)置 body 高度的情況下，是無(wú)法正確獲得可視區(qū)域的高度的，所以這是挺不錯(cuò)的優(yōu)勢(shì)。

3，vmin、vmax 用處

做移動(dòng)頁(yè)面開(kāi)發(fā)時(shí)，如果使用 vw、wh 設(shè)置字體大小（比如 5vw），在豎屏和橫屏狀態(tài)下顯示的字體大小是不一樣的。

由于 vmin 和 vmax 是當(dāng)前較小的 vw 和 vh 和當(dāng)前較大的 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）到現(xiàn)在還只是部分支持（不支持 vmax，同時(shí) vm 代替 vmin）

（2）移動(dòng)設(shè)備

Android：自 4.4 版起就完美支持（2013年12月）
iOS：自 iOS8 版起就完美支持（2014年9月）

二、一個(gè)簡(jiǎn)單的樣例

1，頁(yè)面代碼

視窗（Viewport）單位除了可以用來(lái)設(shè)置元素的寬高尺寸，也可以在文本中使用。下面使用 vw 設(shè)置字體大小來(lái)實(shí)現(xiàn)響應(yīng)式文字。

<!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;//重點(diǎn)看
       font-size: 5vw;//重點(diǎn)看 
       margin: 0 auto;
       background-color: #50688B;
       color: #FFF;
      }
 
      .demo2 {
       width: 80vw;//重點(diǎn)看
       font-size: 5vw;//重點(diǎn)看
       margin: 0 auto;
       background-color: #ff6a00;
      }
 
      .demo3 {
       width: 50vw;//重點(diǎn)看
       height: 50vh;//重點(diǎn)看
       font-size: 1vw;//重點(diǎn)看
       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>

2，效果圖

三、實(shí)現(xiàn)完整覆蓋的遮罩層

有時(shí)為了突出彈出框，或者避免頁(yè)面元素被點(diǎn)擊。我們需要一個(gè)覆蓋整個(gè)可視區(qū)域的半透明遮罩，這個(gè)使用 vw、vh 就可以很輕易地實(shí)現(xiàn)。

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;//重點(diǎn)代碼
        height: 100vh;//重點(diǎn)代碼
        position: fixed;//重點(diǎn)代碼
        top: 0;//重點(diǎn)代碼
        left: 0;//重點(diǎn)代碼
        background: #000000;
        opacity: 0.5;
        display: none;
      }
    </style>
  </head>
  <body>
      <button onclick="document.getElementById('mask').style.display='inline'">點(diǎn)擊顯示遮罩</button>
      <div id="mask" onclick="document.getElementById('mask').style.display='none'"/></div>
  </body>
</html>

2，效果圖

四、實(shí)現(xiàn)居中顯示的彈出框

1，彈出框大小隨內(nèi)容自適應(yīng)

（1）樣例效果圖

點(diǎn)擊彈出按鈕后，會(huì)顯示一個(gè)在整個(gè)屏幕上居中顯示的彈出框。
彈出框的大小根據(jù)內(nèi)容的大小自適應(yīng)（logo 圖片），同時(shí)彈出框后面還有個(gè)覆蓋整個(gè)屏幕的半透明遮罩層。
點(diǎn)擊關(guān)閉按鈕后，則隱藏彈出框。

（2）樣例代碼

遮罩層使用 vw、vh 實(shí)現(xiàn)全屏覆蓋。彈出框添加到遮罩層中并居中。

<!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;
      }
 
//重點(diǎn)代碼
      .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;
      }//重點(diǎn)代碼
 //重點(diǎn)代碼
      .dialog-container:after {
        display: inline-block;
        content: '';
        width: 0;
        height: 100%;
        vertical-align: middle;
      }//重點(diǎn)代碼
 //重點(diǎn)代碼
      .dialog-box {
        display: inline-block;
        border: 1px solid #ccc;
        text-align: left;
        vertical-align: middle;
        position: relative;
      }//重點(diǎn)代碼
 
      .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();">點(diǎn)擊顯示彈出框</button>
      <div id="dialogContainer" class="dialog-container">
          <div class="dialog-box">
              <div class="dialog-title">居中彈出框</div>
              <a onclick="$('#dialogContainer').hide();" class="dialog-close">關(guān)閉</a>
              <div class="dialog-body">
                <img src="logo.png" class="demo-image" />
              </div>
          </div>
      </div>
  </body>
</html>

2，彈出框大小隨視窗大小改變

（1）樣例效果圖

點(diǎn)擊彈出按鈕后，會(huì)顯示一個(gè)在整個(gè)屏幕上居中顯示的彈出框。
彈出框的大小不再由內(nèi)容的大小決定，而是隨視窗大小改變（寬高均為屏幕可視區(qū)域的 80%）。
點(diǎn)擊關(guān)閉按鈕后，則隱藏彈出框。

（2）樣例代碼

遮罩層使用 vw、vh 實(shí)現(xiàn)全屏覆蓋。而彈出框的尺寸位置同樣使用 vw、vh 設(shè)置。


<!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;
      }
 //重點(diǎn)代碼
      .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;
      }
 //重點(diǎn)代碼
      .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();">點(diǎn)擊顯示彈出框</button>
      <div id="dialogContainer" class="dialog-container">
          <div class="dialog-box">
              <div class="dialog-title">居中彈出框</div>
              <a onclick="$('#dialogContainer').hide();" class="dialog-close">關(guān)閉</a>
              <div class="dialog-body">
                <img src="logo.png" class="demo-image" />
              </div>
          </div>
      </div>
  </body>
</html>

五、顯示大圖時(shí)限制其最大尺寸

我們還可以通過(guò)視圖單位來(lái)限制一些元素的最大寬度或高度，避尺寸過(guò)大而超出屏幕。

1，效果圖

（1）點(diǎn)擊按鈕，在屏幕中央顯示原始圖片的大圖。

（2）如果圖片原始寬高均不超過(guò)屏幕寬高的 90%，則顯示圖片的默認(rèn)大小。

（3）如果圖片原始寬高均超過(guò)屏幕寬高的 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, 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;
        text-align: left;
        vertical-align: middle;
        position: relative;
      }
 
      .demo-image {//重點(diǎn)代碼
        max-width: 90vw;
        max-height: 90vh;
      }
    </style>
  </head>
  <body>
      <button onclick="$('#dialogContainer').show();">點(diǎn)擊顯示大圖</button>
      <div id="dialogContainer" class="dialog-container" onclick="$('#dialogContainer').hide();">
          <div class="dialog-box">
              <img src="image.jpg" class="demo-image" />
          </div>
      </div>
  </body>
</html>

六、實(shí)現(xiàn) Word 文檔頁(yè)面效果

1，效果圖

（1）使用 vh 單位，我們可把 web 頁(yè)面做得像 Office 文檔那樣，一屏正好一頁(yè)。改變?yōu)g覽器窗口尺寸，每頁(yè)的大小也會(huì)隨之變化。

（2）拖動(dòng)滾動(dòng)條，我們可以一直往下看到最后一頁(yè)。

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, div, 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;
        //自動(dòng)添加每頁(yè)底部的頁(yè)碼
        $("page").each(function(i){
          $(this).attr("data-page", "第 "+ (i+1) +" 頁(yè)，共 "+ lenPage +" 頁(yè)");
        });
      });
    </script>
  </head>
  <body>
    <page><a href="http://hangge.com">歡迎訪問(wèn) hangge.com</a></page>
    <page></page>
    <page></page>
  </body>
</html>

原文出自：www.hangge.com 轉(zhuǎn)載請(qǐng)保留原文鏈接：https://www.hangge.com/blog/cache/detail_1715.html

H5下，很多時(shí)候需要對(duì)某些DIV進(jìn)行高度或者寬度的設(shè)置。這些高度是相對(duì)屏幕的。

如果div寬度相對(duì)屏幕寬度或者div高度相對(duì)屏幕高度的百分比。這些都很好解決

但是如果div寬度相對(duì)屏幕高度或者div高度相對(duì)屏幕寬度要怎么解決

1、JS：

最簡(jiǎn)單的方法，但是弊端也很明顯，存在重繪的問(wèn)題。也就是如果在網(wǎng)絡(luò)很慢導(dǎo)致js載入時(shí)間很久的情況，就會(huì)暴露出真面目

2、vw&vh

CSS3中引入這2個(gè)單位。

vw-------相對(duì)屏幕寬度

vh-------相對(duì)屏幕高度

.demo{
 width:10vh;
 height:10vw;
}

高度隨瀏覽器寬度變化而變化

更多前端小知識(shí)，盡在https://blog.imcyk.com

-html的作用是設(shè)置和修改innerHTML。

下面來(lái)看看示例程序：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue v-html</title>
<script src="https://cdn.bootcss.com/vue/2.6.2/vue.min.js"></script>
</head>
<body>
<div id="test1">
 <div v-html="text1"></div>
 <input type="button" value="修改內(nèi)部樣式" @click="change()">
</div>
<script>
 var vm1=new Vue({
 el:'#test1',
 data:{
 text1:"<div id=\"test\"><div>Name is :{{name}}</div><div>Local Name is: {{jifukui[0].name}}</div></div>"
 },
 methods:{
 change:function(){
 this.text1="<div id=\"test\"><div>name is :{{name}}</div><div>Local name is: {{jifukui[0].name}}</div></div>"
 }
 }
});
var vm=new Vue({ 
 el: '#test', 
 data: { 
 name:"hahahhaha" ,
 jifukui:[
 {
 name:"jifukui"
 }
 ]
 }, 
 }); 
</script>
</body>
</html>

程序設(shè)計(jì)思路：

（1）程序中包含兩個(gè)vue示例vm1掛載在test1上，text1包含一個(gè)<div>的標(biāo)簽用于插入v-html，還有一個(gè)<input>標(biāo)簽用于設(shè)置改變<div>標(biāo)簽中的v-html的內(nèi)容。

（2）第二個(gè)vue實(shí)例掛載在test上進(jìn)行插值。

程序結(jié)果：

（1）默認(rèn)樣式

可以明顯的看到vm1實(shí)例被渲染且vm實(shí)例也被渲染，從紅色方框中的內(nèi)容可以看到就是v-html的值text1的值。

（2）點(diǎn)擊后的樣式

點(diǎn)擊后可以看到text1的值發(fā)生了改變，但是其中的關(guān)于vm實(shí)例中的內(nèi)容沒(méi)有被綁定替換。所以一般使用v-html進(jìn)行設(shè)置和修改innerHTML的值，所以盡量不要使用v-html組合模板。

在線咨詢

上一篇：CSS：display屬性和position屬性的介
下一篇：純CSS實(shí)現(xiàn)波浪效果

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

CSS3 - 新單位vw、vh、vmin、vmax使

一、基本說(shuō)明

1，vw、vh、vmin、vmax 的含義

2，vw、vh 與 % 百分比的區(qū)別

3，vmin、vmax 用處

4，瀏覽器兼容性

二、一個(gè)簡(jiǎn)單的樣例

1，頁(yè)面代碼

2，效果圖

三、實(shí)現(xiàn)完整覆蓋的遮罩層

1，樣例代碼

2，效果圖

四、實(shí)現(xiàn)居中顯示的彈出框

1，彈出框大小隨內(nèi)容自適應(yīng)

2，彈出框大小隨視窗大小改變

五、顯示大圖時(shí)限制其最大尺寸

1，效果圖

2，樣例代碼

六、實(shí)現(xiàn) Word 文檔頁(yè)面效果

1，效果圖

2，樣例代碼

程序設(shè)計(jì)思路：

程序結(jié)果：

您的項(xiàng)目需求