https://blog.csdn.net/qq_40001322/article/details/80867289

1.em

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

在做手机端的时候经常会用到的做字体的尺寸单位

说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5

但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照后面的例子。

2.rem

这里的r就是root的意思，意思是相对于根节点来进行缩放，当有嵌套关系的时候，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。

参照后面给的demo

3.vh

vh就是当前屏幕可见高度的1%，也就是说

height:100vh == height:100%;

但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开，

但是设置height:100vh，该元素会被撑开屏幕高度一致。

4.vw

vw就是当前屏幕宽度的1%

补充一句，当设置width:100%，被设置元素的宽度是按照父元素的宽度来设置，

但是100vw是相对于屏幕可见宽度来设置的，所以会出现50vw 比50%大的情况

 



  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>

 

    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>
扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄