移动端相关——rem参考CSS 的值与单位 - 学习 Web 开发

参考CSS 的值与单位 - 学习 Web 开发 | MDN (mozilla.org)，rem指根元素的字体大小，即<html>的font-size.

body{
  font-size: 2rem
}

浏览器默认的字体大小为16像素，那么2rem就是 2*16 = 32 像素。

如果要修改根元素本身的字体大小，只需要声明：

html{
  font-size: 20px
}

则 rem = 20 像素。

动态REM

一切单位以宽度为基准，就能完美还原响应式设计。具体思路是：让根元素的字体大小等于视窗的宽度，即 1rem = 1 html font-size = page width.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, 
    user-scalable=no, maximum-scale=1.0, minimum-scale=1.0"
    />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .child {
        background: #ddd;
      }
      body {
        font-size: 16px;
      }
      .child {
        width: 0.4rem;
        height: 0.05rem;
        margin: 0.05rem 0.05rem;
        float: left;
      }
      .clearfix::after {
        content: "";
        clear: both;
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="parent clearfix">
      <div class="child">box</div>
      <div class="child">box</div>
      <div class="child">box</div>
      <div class="child">box</div>
    </div>
    <script>
      var pageWidth = window.innerWidth;
      document.write("<style>html{font-size:" + pageWidth + "px;}</style>");
    </script>
  </body>
</html>

px自动变为rem

实现了动态REM之后，如果我们需要决定元素的大小，就需要自己计算，非常繁琐的一步，可以用函数来解决。
使用SCSS语言，在SCSS脚本里定义转化函数

// style.scss
// 视窗宽度需要自己获取
@function pixelToRem( $px ){
  @return $px / $designWidth * 10 + rem
}

// ...
.child{
  width: pixelToRem(320);
  height: pixelToRem(160);
  margin: pixelToRem(40) pixelToRem(40);
  border: 1px solid red;
  // ...
}

上面的代码演示了SCSS脚本的自定义函数功能，能够实现像素自动转化为rem。