尺寸單位em,rem,vh,vw

時間  2019-12-09
標籤 尺寸 單位 rem 欄目 CSS 简体版
原文   原文鏈接

這幾天作demo，看了網上教程有用到尺寸單位vh，vw， 這些單位不是很熟悉，因此上網上找了些資料來認識了這些不認識的單位css

1.emhtml

在作手機端的時候常常會用到的作字體的尺寸單位css3

說白了 em就至關於「倍」，好比設置當前的div的字體大小爲1.5em，則當前的div的字體大小爲：當前div繼承的字體大小*1.5瀏覽器

可是當div進行嵌套的時候，em始終是按照當前div繼承的字體大小來縮放，參照後面的例子。字體

2.remspa

這裏的r就是root的意思，意思是相對於根節點來進行縮放，當有嵌套關係的時候，嵌套關係的元素的字體大小始終按照根節點的字體大小進行縮放。.net

參照後面給的demoxml

3.vhhtm

vh就是當前屏幕可見高度的1%，也就是說blog

height:100vh == height:100%;

可是有個好處是當元素沒有內容時候，設置height:100%該元素不會被撐開，

可是設置height:100vh，該元素會被撐開屏幕高度一致。

4.vw

vw就是當前屏幕寬度的1%

補充一句，當設置width:100%，被設置元素的寬度是按照父元素的寬度來設置，

可是100vw是相對於屏幕可見寬度來設置的，因此會出現50vw 比50%大的狀況

 

最後說一句，以上這些尺寸都是css3中的尺寸單位

低版本的ie就不支持了

 

沒看懂的同窗能夠參考這裏的一個demo

複製粘貼保存成index.html便可在瀏覽器查看。

 

祝你們春節快樂！

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html lang="Zh-cn">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>恭賀新春</title>  
  6. </head>  
  7. <style type="text/css" media="screen">  
  8. html{  
  9.     font-size: 14px;  
  10. }  
  11. .em,  
  12. .em > .em-son,  
  13. .em > .em-son > .em-grandson {  
  14.     font-size: 1.2em;  
  15. }   
  16. .rem,  
  17. .rem > .rem-son,  
  18. .rem > .rem-son > .rem-grandson {  
  19.     font-size: 1.2rem;  
  20. }   
  21. .rem-box {  
  22.     background: #d60b3b;  
  23.     width:10rem;  
  24.     height: 10rem;  
  25.     color: #fff;  
  26.     text-align: center;   
  27.     line-height:5rem;  
  28. }  
  29. .vhvw-box {  
  30.     background: #d60b3b;  
  31.     width:50vw;  
  32.     height: 50vh;  
  33.     color: #fff;  
  34.     text-align: center;   
  35.     line-height:25vh;  
  36. }  
  37. </style>  
  38. <body>  
  39. <h1>em 繼承父元素的字體大小，來變大或變小，多層嵌套字體變化</h1>  
  40. <div class="em">  
  41.     字體大小 1.2 * 14（父元素body） = 16px  
  42.         <div class="em-son">  
  43.             字體大小 1.2 * 16(父元素em) = 20px  
  44.             <div class="em-grandson">  
  45.                 字體大小 1.2 * 20(父元素em-son) = 24px  
  46.             </div>  
  47.     </div>  
  48. </div>  
  49. <br>  
  50. <h1>rem 繼承根節點元素的字體大小，來變大或變小，多層嵌套字體不變化</h1>  
  51. <div class="rem">  
  52.     字體大小 1.2 * 14（根節點html） = 16px  
  53.         <div class="rem-son">  
  54.             字體大小 1.2 * 14（根節點html） = 16px  
  55.             <div class="rem-grandson">  
  56.                 字體大小 1.2 * 14（根節點html） = 16px  
  57.             </div>  
  58.     </div>  
  59. </div>  
  60. <br>  
  61. <h1>rem 也可做爲固定長度單位設置寬高等</h1>  
  62. <div class="rem-box">  
  63.     寬：14 * 10 = 140px<br>  
  64.     高：14 * 10 = 140px  
  65. </div>  
  66. <br>  
  67. <h1>vh,vw 屏幕可見區域的高度，寬度的1%</h1>  
  68. <div class="vhvw-box">  
  69.     寬：屏幕寬度的50%<br>  
  70.     高：屏幕高度的50%  
  71. </div>  
  72. </body>  
  73. </html>  
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程