理解 rem 方案原理

Posted 2022-09-20 前端精髓

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了理解 rem 方案原理相关的知识，希望对你有一定的参考价值。

设计师交付给前端开发一张宽度为750px的视觉稿，设计稿上元素的尺寸、颜色、位置等已做过标注，要求工程师工在适配不同屏幕尺寸的设备时采用等比缩放的方案。

首先设计稿是基于 iPhone6 设计的也就是宽度 750px。（先不考虑dpr的问题下面会说）然后设置 1rem 等于 100px（ html font-size 为 100px），相当于 7.5rem = 100%宽度 = 设备的宽度。

750 / 7.5 = 100

由于是基于 7.5rem 开发。iPhone6 的物理像素是 375px（dpr是2.0），如果此时还想让 7.5rem 等于设备宽度只能调整 1rem 对应 font-size 的比例， 375 / 7.5 = 50 让 1rem=50px 就可以实现。

如果想让 iPhone5 适配只需要 1rem = （320 / 7.5） = 42.66px 就可以实现 iPhone5 的适配，这个方法可以适配市面上绝大多数的移动端设备。

只需要加下面这句话可以实现我上述效果。

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

动态计算并设置不同尺寸 html 的 font-size 属性(大白话：动态计算出来不同手机页面的 html 的font-size)。动态 rem 方案既能实现页面级整体缩放，又能个性化控制某些元素不缩放。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * 
      margin: 0;
      padding: 0;
    

    html 
      font-size: 100px;
    

    body 
      font-size: 16px;
    

    .root 
      max-width: 750px;
      margin: 0 auto;
    

    .box 
      width: 7.02rem;
      height: 2.06rem;
      border-radius: 0.24rem;
      background: red;
      margin: 0 auto;
    
  </style>
</head>

<body>
  <div class="root">
    <div class="title">hello</div>
    <div class="box"></div>
  </div>
  <script>
    window.addEventListener('resize', () => 
      calculate()
    )
    function calculate(isFirst) 
      const width = document.documentElement.clientWidth
      const value = width > 750 ? 750 : width
      document.documentElement.style.fontSize = value / 7.5 + 'px'
    
    calculate()
  </script>
</body>

</html>

以上是关于理解 rem 方案原理的主要内容，如果未能解决你的问题，请参考以下文章

理解 rem 方案原理

rem布局原理深度理解（以及em/vw/vh）