一、什么是rem

  1. rem（root element）就是根元素的font-size。也就是：1rem = html的font-size
  2. ps：font-size默认为16px

二、原理：

  1. 设置html的font-size使得100rem=屏幕宽度。

三、示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <!-- 让布局的width=设备的width -->
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         div {
  11.             width: 2rem;
  12.             height: 50px;
  13.             background-color: red;
  14.         }
  15.     </style>
  16. </head>
  18. <body>
  19.     <div>
  21.     </div>
  22.     <script>
  23.         // px,%,rem 所谓rem是相对根元素(html)的font-size而言的
  24.         // html.font-size=12px 1rem=16px
  25.         // 10rem
  26.         // 1.获取布局的width
  27.         var width = window.innerWidth;
  28.         var html = document.getElementsByTagName("html")[0];
  29.         html.style.fontSize = width / 10 + "px";
  30.         window.onresize = function(){
  31.             var width = document.documentElement.clientWidth;
  32.             html.style.fontSize = width/10+"px";
  33.         }
  34.     </script>
  35. </body>
  36. <html>

插件：

图片.png
设置
图片.png
在此输入屏幕尺寸（1080px就输入108）