vw、vh、vmin、vmax 的含義

時間  2019-12-08
標籤 vmin vmax 含義 简体版
原文   原文鏈接
像 px、em 這樣的長度單位你們確定都很熟悉，前者爲絕對單位，後者爲相對單位。CSS3 又引入了新單位：vw、vh、vmin、vmax。下面對它們作個詳細介紹。
 

1、基本說明

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月）
 

2、一個簡單的樣例

1，頁面代碼

視窗（Viewport）單位除了能夠用來設置元素的寬高尺寸，也能夠在文本中使用。下面使用 vw 設置字體大小來實現響應式文字。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!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;
       
        color: #FFF;
       }
 
       .demo2 {
        width: 80vw;
        font-size: 5vw;
        margin: 0 auto;
       
       }
 
       .demo3 {
        width: 50vw;
        height: 50vh;
        font-size: 1vw;
        margin: 0 auto;
       
        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，效果圖

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

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

有時爲了突出彈出框，或者避免頁面元素被點擊。咱們須要一個覆蓋整個可視區域的半透明遮罩，這個使用 vw、vh 就能夠很輕易地實現。

1，樣例代碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!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，效果圖

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

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

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

（1）樣例效果圖
  • 點擊彈出按鈕後，會顯示一個在整個屏幕上居中顯示的彈出框。
  • 彈出框的大小根據內容的大小自適應（logo 圖片），同時彈出框後面還有個覆蓋整個屏幕的半透明遮罩層。
  • 點擊關閉按鈕後，則隱藏彈出框。
 
原文:CSS3 - 新單位vw、vh、vmin、vmax使用詳解（附樣例）
 
（2）樣例代碼
遮罩層使用 vw、vh 實現全屏覆蓋。彈出框添加到遮罩層中並居中。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!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;
        
         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;
        
         font-size: 12px;
         text-align: left;
       }
 
       .dialog-close {
         position: absolute;
         top: 5px;
         right: 5px;
         font-size: 12px;
       }
 
       .dialog-body {
        
       }
     </ 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%）。
  • 點擊關閉按鈕後，則隱藏彈出框。
 
原文:CSS3 - 新單位vw、vh、vmin、vmax使用詳解（附樣例） 原文:CSS3 - 新單位vw、vh、vmin、vmax使用詳解（附樣例）
 
（2）樣例代碼
遮罩層使用 vw、vh 實現全屏覆蓋。而彈出框的尺寸位置一樣使用 vw、vh 設置。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!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;
        
         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;
        
         font-size: 12px;
         text-align: left;
       }
 
       .dialog-close {
         position: absolute;
         top: 5px;
         right: 5px;
         font-size: 12px;
       }
 
       .dialog-body {
        
         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 >

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

咱們還能夠經過視圖單位來限制一些元素的最大寬度或高度，避尺寸過大而超出屏幕。
 

1，效果圖

（1）點擊按鈕，在屏幕中央顯示原始圖片的大圖。
（2）若是圖片原始寬高均不超過屏幕寬高的 90%，則顯示圖片的默認大小。
（3）若是圖片原始寬高均超過屏幕寬高的 90%，則限制爲屏幕的 90%，使其可以徹底顯示。
原文:CSS3 - 新單位vw、vh、vmin、vmax使用詳解（附樣例）
原文:CSS3 - 新單位vw、vh、vmin、vmax使用詳解（附樣例）
 

2，樣例代碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!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;
        
         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 >

6、實現 Word 文檔頁面效果

 

1，效果圖

（1）使用 vh 單位，咱們可把 web 頁面作得像 Office 文檔那樣，一屏正好一頁。改變瀏覽器窗口尺寸，每頁的大小也會隨之變化。
（2）拖動滾動條，咱們能夠一直往下看到最後一頁。
原文:CSS3 - 新單位vw、vh、vmin、vmax使用詳解（附樣例） 原文:CSS3 - 新單位vw、vh、vmin、vmax使用詳解（附樣例）
 

2，樣例代碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!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 {
        
       }
 
       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;
        
         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  轉載請保留原文連接：http://www.hangge.com/blog/cache/detail_1715.htmljavascript

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程