2. 程式人生 > >css3新單位vw、vh、vmin、vmax的使用介紹

css3新單位vw、vh、vmin、vmax的使用介紹

阿新 • • 發佈：2018-06-01
工具 left div vma add round 16px head com

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、一個簡單的樣例

　　視窗（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>

技術分享圖片

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

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

技術分享圖片 技術分享圖片

css3新單位vw、vh、vmin、vmax的使用介紹

相關推薦

CSS3新單位vw，vh，vmin，vmax詳解

word文檔 的區別 新年 flag 狀態 設置 http 瀏覽器兼容性 選擇 1，vw，vh，vmin，vmax是由視窗Viewport大小來決定的，單位1，代表1%，是一種相對單位，只要是為響應式適配視窗的一種解決方案； vw：view width（視窗寬度）的百分比，

css3新單位vw、vh、vmin、vmax的使用介紹

工具 left div vma add round 16px head com 1，vw、vh、vmin、vmax 的含義 　　（1）vw、vh、vmin、vmax 是一種視窗單位，也是相對單位。它相對的不是父節點或者頁面的根節點。而是由視窗（Viewport）大小來決定的

css3新單位vw、vh、vmin、vmax的使用詳解

1，vw、vh、vmin、vmax 的含義 （1）vw、vh、vmin、vmax 是一種視窗單位，也是相對單位。它相對的不是父節點或者頁面的根節點。而是由視窗（Viewport）大小來決定的，單位 1，代表類似於 1%。 視窗(Viewport)是你的瀏覽器實

css3中的一些特別的單位：em、rem、vw、vh、vmin、vmax

em：相對父元素的單位。例：父節點font-size：20px；子節點font-size：1em；（即子節點為20px）。 rem ：相對於根節點（html的字型大小）的單位。在不設定html字型

搞清楚CSS單位px、em、rem、vh、vw、vmin、vmax

1、px：相對長度單位。畫素px是相對於顯示器螢幕解析度而言的。 2、em：相對長度單位。相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。 看下面例子： HTML: <body>body <

CSS長度單位：vh、vw、vmin、vmax、em、rem、ex、ch、px

CSS的長度單位。 一些屬性可能允許有負長度值，或者有一定的範圍限制。如果不支援負長度值，那應該變換到能夠被支援的最近的一個長度值。 長度單位包括包括：相對單位和絕對單位。相對長度單位包括有： em,

CSS3 的視口單位vw、vh實現自適應（帶有px，em，rem的簡單介紹）

一、px，em，rem，vw的簡單介紹1、pxpx其實就是畫素的意思，全稱pixel，也就是影象的基本取樣單位。對於不同的裝置，它的影象基本單位是不同的，比如顯示器和印表機。而我們通常所說的顯示器解析度是指桌面設定的解析度，不是顯示器的物理解析度，但是現在我們的桌面解析度和物

Px、em、rem、%、vw、wh、vh、vmin、vmax等單位的區別！

這裡是修真院前端小課堂，每篇分享文從 【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】 八個方面深度解析前端知識/技能，本篇分享的是： 【Px、em、rem、%、vw、wh、vh、vmin、vmax等單位的區別！ 】 1.背

css3中單位px,em,rem,vh,vw,vmin,vmax的區別及瀏覽器支持情況

定義 ie11 ring star ocl light for 無法 頁面 px：絕對單位，頁面按精確像素展示 em：相對單位，基準點為父節點字體的大小，如果自身定義了font-size按自身來計算（瀏覽器默認字體是16px），整個頁面內1em不是一個固定的值。 rem：相

px、em、rem、%、vw、wh、vmin、vmax等單位有什麼區別？

原文出處：https://blog.csdn.net/jnshu_it/article/details/77161717 (本文有修改） 1.背景介紹 傳統的專案開發中，我們只會用到px、%、em這幾個單位，它可以適用於大部分的專案開發，並且擁有比較良好的相容性。但是你知道嗎？從css3開始

小程式中使用rpx單位,佈局適配方案（rpx、px、vw、vh）

1:小程式中使用rpx單位 rpx單位是微信小程式中css的尺寸單位，rpx可以根據螢幕寬度進行自適應。 規定螢幕寬為750rpx。如在 iPhone6 上，螢幕寬度為375px，共有750個物理畫素，則750rpx = 375px = 750物理畫素，1rpx = 0.5px

通過vw、vh單位實現全屏頁面的簡單自適應

剛剛入行前端開發一年，經驗欠缺，在新公司獨立承擔一個生產管理系統的前端開發工作。該系統操作頁面均為全屏，頁面固定但使用機器有所不同，且使用者在使用時不保證能記得按F11（手動捂臉），因此希望適應全屏和不同解析度以達成最好的顯示效果。 初版使用固定式佈局，完成後現場測試效果一般，後改為使用

css3中單位px,em,rem,vh,vw,vmin,vmax的區別及瀏覽器支援情況

px：絕對單位，頁面按精確畫素展示 em：相對單位，基準點為父節點字型的大小，如果自身定義了font-size按自身來計算（瀏覽器預設字型是16px），整個頁面內1em不是一個固定的值。 rem：相對單位，可理解為”root em”, 相對根節點html的字型大小來計算，

px、em、rem、%、vw、vh、vm這些單位的區別

1.背景介紹我們為什麼要選擇合適的網頁設計單位隨著Web的發展，對新的解決方案的需求也會繼續增大，對網頁的要求更高。網頁設計單位是涉及到我們佈局的效果，使用不同的單位會對最終的demo，會有影響。現在都是要求響應式設計，需要適配各種裝置，電腦，手機，平板。如果單位不合適，可能

vh、vw和rem和em、pt

vh height：1vh； 指當前螢幕可見高度的1%，即： height：100vh ==height：100% 設定為vh，當元素沒有內容時候，元素會被撐開和螢幕高度一致。 height：100%則無法撐開。 vw 當前螢幕寬度的1% width：100%，被設定

微信小程式填坑之路（三）：佈局適配方案（rpx、px、vw、vh）

因為小程式是以微信為平臺執行的，可以同時執行在android與ios的裝置上，所以不可避免的會遇到佈局適配問題，特別是在iphone5上，因為螢幕尺寸小的緣故，也是適配問題最多的機型，下面就簡單介紹幾種適配方法。 rpx適配 rpx是小程式中

css3大小單位px、pt、em和rem的區別

任意瀏覽器的預設字型高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em,10px=0.625em。為了簡化font-size的換算，需要在css中的body選擇器中宣告Font-size=62.5%，這就使em值變為 16px*62.5%=10px, 這樣12px=1

微信小程式之px、rem、px、vw、vh

rpx 是微信小程式解決自適應螢幕尺寸的尺寸單位。微信小程式規定螢幕的寬度為750rpx。 無論是在iPhone6上面還是其他機型上面都是750rpx的螢幕寬度，拿iPhone6來講，螢幕寬度為375px，把它分為750rpx後， 1rpx = 0.5px。 微信小程式同時也支援rem

CSS3的vw和vh視口單位

認識視口單位（ Viewport units )首先，我們要了解什麼是視口。在業界，極為推崇的一種理論是 Peter-Paul Koch (江湖人稱“PPK大神”)提出的關於視口的解釋——在桌面端，視口指的是在桌面端，指的是瀏覽器的可視區域；而在移動端較為複雜，它涉及到三個視

CSS3使用vw和vh視口單位實現自適應

在業界，極為推崇的一種理論是 Peter-Paul Koch (江湖人稱“PPK大神”)提出的關於視口的解釋——在桌面端，視口指的是在桌面端，指的是瀏覽器的可視區域；而在移動端較為複雜，它涉及到三個視口：分別是 Layout Viewport（佈局視口）、 Visual Viewport（視覺視口）、Idea