定义

它的全称是 font size of the root element （根元素的字体大小）,
它是CSS3中新增加的一个尺寸（度量）单位，根节点（html）的font-size决定了rem的尺寸，也就是说它是一个相对单位，相对于(html)。
rem是一种相对长度单位。相对于根元素(即html元素)font-size计算值的倍数。
※其实rem布局的本质是等比缩放，一般是基于宽度，试想一下如果UE图能够等比缩放，那该多么美好啊。

移动端

  1. <!DOCTYPE html>
  2. <html lang="en" style="font-size:100px">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script>
  10.         function resetFontSize() {
  11.             var baseFontSize = 100; //100PX的默认值
  12.             var designWidth = 750; //设计稿的宽度
  13.             var width = window.innerWidth;
  14.             var currentFontSize = (width / designWidth) * baseFontSize;
  15.             document.getElementsByTagName('html')[0].style.fontSize = currentFontSize + 'px';
  16.         }
  17.         window.onresize = function () {
  18.             resetFontSize()
  19.         };
  20.         resetFontSize()
  21.     </script>
  22.     <style>
  23.         *{
  24.             padding:0;
  25.             margin:0;
  26.         }
  27.         body{
  28.             overflow: auto;
  29.             font-size: .28rem;
  30.         }
  31.         .box{
  32.             width:7.5rem;
  33.             height: 1rem;
  34.             background: #000;
  35.         }
  37.     </style>
  38. </head>
  39. <body>
  40.     <div class="box"></div>
  41.     <p>42341</p>
  44. </body>
  45. </html>

web端

常规页面布局

  1. // 设置 rem 函数
  2. function setRem () {
  3.     //  PC端
  4.     console.log('非移动设备')
  5.     // 基准大小
  6.     baseSize = 100; 
  7.     let basePc = baseSize / 1920; // 表示1920的设计图,使用100PX的默认值
  8.     let vW = window.innerWidth; // 当前窗口的宽度
  10.     let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
  11.     document.documentElement.style.fontSize =  rem +'px';
  12. }
  13. // 初始化
  14. setRem();
  15. // 改变窗口大小时重新设置 rem
  16. window.onresize = function () {
  17.   setRem()
  18. };

无滚动条布局

参考地址：https://hello.zhuzher.com

  1. // 设置 rem 函数
  2. function setRem () {
  3.     //  PC端
  4.     console.log('非移动设备')
  5.     // 基准大小
  6.     baseSize = 100;
  7.     let basePc = baseSize / 1920; // 表示1920的设计图,使用100PX的默认值
  8.     let vW = window.innerWidth; // 当前窗口的宽度
  9.     let vH = window.innerHeight; // 当前窗口的高度
  10.     // 非正常屏幕下的尺寸换算
  11.     let dueH = vW * 1080 / 1920
  12.     if (vH < dueH) { // 当前屏幕高度小于应有的屏幕高度，就需要根据当前屏幕高度重新计算屏幕宽度
  13.       vW = vH * 1920 /1080
  14.     }
  15.     let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
  16.     document.documentElement.style.fontSize =  rem + 'px';
  17. }
  18. // 初始化
  19. setRem();
  20. // 改变窗口大小时重新设置 rem
  21. window.onresize = function () {
  22.   setRem()
  23. };

参考文章：https://www.cnblogs.com/WhiteM/p/12720849.html