一、rem、em

1-1 基本概念

rem与em都是相对单位，我们使用它们的目的就是为了适应各种手机屏幕。

1-2 计算方式

rem是根据html根节点的字体大小来计算的，而em是根据父元素的字体大小来计算

  1. <style>
  2.   html{
  3.     font-size: 40px;
  4.   }
  5.   body{
  6.     font-size: 20px;
  7.   }
  8.   .use_em,.use_rem{
  9.     font-size: 14px;
  10.   }
  11.   .use_em span{
  12.     font-size: 1em;
  13.   }
  14.   .use_rem span{
  15.     font-size: 1rem;
  16.   }
  17. </style>
  19. </head>
  20. <body>
  22. <div class="use_em">
  23.     <span>font-size使用em</span>
  24. </div>
  26. <div class="use_rem">
  27.     <span>font-size使用rem</span>
  28. </div>
  31. </body>
  33. //第一个span的字体大小为14px，第二个span的字体大小为40px

二、vh、vw

vh和vw是根据视口的高度和宽度来计算的，1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度