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

px、em 這樣的長度單位大家肯定都很熟悉，前者為絕對單位，后者為相對單位。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>

2，效果圖

三、實現完整覆蓋的遮罩層

有時為了突出彈出框，或者避免頁面元素被點擊。我們需要一個覆蓋整個可視區域的半透明遮罩，這個使用 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>

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, 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，效果圖

（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, 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 {//重點代碼
        max-width: 90vw;
        max-height: 90vh;
      }
    </style>
  </head>
  <body>
      <button onclick="$('#dialogContainer').show();">點擊顯示大圖</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>

六、實現 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, 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;
        //自動添加每頁底部的頁碼
        $("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>

原文出自：www.hangge.com 轉載請保留原文鏈接：https://www.hangge.com/blog/cache/detail_1715.html

果圖:

所有代碼

秘CSS3：打造視覺盛宴——深度解析漸變、陰影與遮罩技術

隨著Web技術的不斷演進，CSS3以其強大的視覺表現力，賦予網頁設計無限可能。本文將深入剖析CSS3中的三大視覺魔法工具——漸變、陰影與遮罩技術，通過詳盡的理論講解和豐富的實例演示，助您掌握這些技巧，打造出令人眼前一亮的網頁視覺盛宴。

一、魅力漸變：色彩的藝術流動

1. 線性漸變：平滑過渡，簡約而不簡單

css
background: linear-gradient(to right, #ff6b6b, #ff9595);

上述代碼創建了一個從左至右，由#ff6b6b漸變到#ff9595的線性漸變背景。您可以調整方向（如`to bottom`、`45deg`等）、添加更多顏色停止點來豐富漸變效果。

2. 徑向漸變：聚焦視覺中心，營造立體感

css
background: radial-gradient(circle at center, #f7f7f7, #dcdcdc);

此例中，我們創建了一個以元素中心為圓心，從#f7f7f7漸變到#dcdcdc的圓形徑向漸變背景。通過調整形狀（如`ellipse`）、大小（如`closest-side`）和位置（如`top left`），可以靈活定制徑向漸變樣式。

二、立體陰影：賦予元素生命與空間感

1. 盒子陰影（Box Shadow）：輕松實現三維效果

css
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);

上述代碼為元素添加了一個向右下偏移2px、模糊半徑為8px、顏色為rgba(0, 0, 0, 0.3)的陰影。理解盒陰影的基本參數（水平偏移、垂直偏移、模糊半徑、擴散半徑、顏色）并靈活運用，即可創造出豐富的陰影效果。

2. 文本陰影（Text Shadow）：讓文字躍然紙上

css
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.?), -1px -1px 2px rgba(255, 255, 255, 0.5);

此處為文本設置了兩個陰影：一個向右下偏移、顏色較深的陰影，以及一個向左上偏移、顏色較淺的陰影，形成微妙的浮雕效果。通過疊加多個陰影、調整參數，您可以創作出各種獨特的文本樣式。

三、神奇遮罩：掌控元素可見度與透明度

1. CSS Mask：精細裁剪，展現獨特視界

css
mask-image: linear-gradient(to right, transparent 0%, black 50%, transparent 100%);

該代碼為元素應用了一個從左至右的線性漸變遮罩，使得元素左側和右側各有一半區域透明。您還可以使用`mask-mode`、`mask-repeat`、`mask-position`等屬性進一步調整遮罩行為。

2. CSS Clip Path：創意裁剪，打破常規布局

css
clip-path: polygon(0 0, 100% 0, .png);

上述代碼使用多邊形裁剪路徑，將元素頂部裁剪成尖角形狀。您還可以使用橢圓、圓形、內切/外切矩形等多種路徑類型，甚至借助SVG路徑實現更為復雜的裁剪效果。

四、實戰案例：融合三大技術，打造視覺盛宴

案例一：動態漸變按鈕

css
/* 定義CSS變量 */
:root {
  --start-color: #ff6b6b;
  --end-color: #ff9595;
}

.button {
  background: linear-gradient(to right, var(--start-color), var(--end-color));
  transition: background 0.3s ease-in-out;
}

.button:hover,
.button:focus {
  --start-color: #ff9595;
  --end-color: #ff6b6b;
}

利用CSS變量、偽類和動畫，創建一個點擊時背景漸變顏色動態變化的按鈕：

案例二：懸浮卡片與陰影交互

css
.card {
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}

.card:hover {
  box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.5);
}

結合盒子陰影與:hover偽類，實現鼠標懸停時卡片陰影增強的交互效果：

案例三：遮罩疊加文字特效

css
.image-overlay {
  background-image: url('image.jpg'), linear-gradient(to bottom, transparent, black);
  background-blend-mode: multiply;
  mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
}

利用遮罩與多重背景，創造出文字在圖片上淡入淡出的特效：

結語

CSS3的漸變、陰影與遮罩技術，如同網頁設計的調色板、光影魔術師和剪刀手，賦予網頁視覺表現無盡的可能性。通過深入理解并熟練運用這些技術，您將能打造出既美觀又富有創意的網頁界面，為用戶帶來極致的視覺體驗。持續探索、實踐與創新，您的每一個作品都將成為Web世界中的一道獨特風景。

在線咨詢

上一篇：媒體融合應建立符合主流價值觀的評估體系
下一篇：一起學javaFx:css篇-仿某音樂播放條

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

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

一、基本說明

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

2，vw、vh 與 % 百分比的區別

3，vmin、vmax 用處

4，瀏覽器兼容性

二、一個簡單的樣例

1，頁面代碼

2，效果圖

三、實現完整覆蓋的遮罩層

1，樣例代碼

2，效果圖

四、實現居中顯示的彈出框

1，彈出框大小隨內容自適應

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

五、顯示大圖時限制其最大尺寸

1，效果圖

2，樣例代碼

六、實現 Word 文檔頁面效果

1，效果圖

2，樣例代碼

秘CSS3：打造視覺盛宴——深度解析漸變、陰影與遮罩技術

一、魅力漸變：色彩的藝術流動

二、立體陰影：賦予元素生命與空間感

三、神奇遮罩：掌控元素可見度與透明度

四、實戰案例：融合三大技術，打造視覺盛宴

您的項目需求