• 我们假设 1rem=20px; —> 屏幕宽375px
    • height=50/20=2.5rem
    • 1rem=40px; —> 屏幕宽750px
    • height=100/40=2.5rem
    • 得出： 1rem=(?/375)*20px=屏幕宽度
    • 1rem = (document.documentElement.clientWidth / 375) * 20px;

    image.png

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>Document</title>
    8.     <style>
    9.       :root {
    10.         font-size: 10px;
    11.       }
    12.       div {
    13.         width: 1rem;
    14.         height: 1rem;
    15.         border: 1px solid red;
    16.       }
    17.     </style>
    18.   </head>
    19.   <body>
    20.     <div></div>
    21.     <script>
    22.       window.onresize = setRemUnit
    23.       setRemUnit()
    24.       function setRemUnit() {
    25.         let docEl = document.documentElement
    26.         let viewWidth = docEl.clientWidth
    27.         docEl.style.fontSize = (viewWidth / 375) * 10 + 'px'
    28.       }
    29.     </script>
    30.   </body>
    31. </html>
    • rem总结：
      1. rem与html的字体大小是对应的，如果1rem=20px，那么就需要设置html的字体大小为20px；
      1. 如果设计稿是375px宽的，我们指定该宽度下1rem=20px，那么设计稿上40px的元素，就是2rem。
    • 也就是说，在写页面的时候，要指定设计稿对应的页面内，1rem等于多少px，然后参考设计稿去计算元素是多少rem。当页面不是375px宽时，就需要根据页面的实际宽度来动态设置html的字体大小，这样元素就会跟随视口的宽度来进行缩放了。