1、简述 JS rem 基本设置

rem：root em
设置 em 后，将以父级的 font-size 为基准，等比例渲染：1em = 父 fs
举例：

.parent {
  font-size: 20px;

  .child {
    width: 2em; // 2 * 20px = 40px
  }
}

rem 的区别为父元素固定为 root 节点，即 html 元素。
所以可以通过动态设置 html 元素的 font-size 来实现等比例缩放。

预期效果：
1、假如设计稿给的标准宽度为 750px，其中有个元素为宽 100px，高 345px
2、若在宽为 750px 的设备下，元素显示效果要为：宽 100px，高 345px
3、若在宽为 375px 的设备下，元素显示效果要为：宽 50px，高 172.5px
4、若在宽为 Xpx 的设备下，元素显示效果要为：宽 100X/750px，高 345X/750px
这样就是等比例缩放的

实现逻辑：
1、假如设计稿给的标准宽度为 750px，其中有个元素为宽 100px，高 345px
2、制定基准：100rem = 750px，其中的 100 可随意制定，20、50 都行看个人喜好
3、根据 2 定的基准，动态设置 html 元素的

html {
  /* 100vw 为页面宽度 */
  /* 100 为定的基准 */
  font-size: calc(100vw / 100) /* 等价于 font-size: 1vw */
}

4、根据 2 定的基准可得新基准：1rem = 7.5px
5、根据 4 得的基准，将所有 CSS 的 px 改为 rem
6、假如设计稿内有个元素为宽 100px，高 345px

.box {
  width: 13.3rem; /* 13.3 = 100 / 7.5 */
  height: 46rem; /* 46 = 345 / 7.5 */
}

详细解释：
1、当页面宽度为 750px 时
2、对应的 html 元素的font-size为750px / 100 = 7.5px
3、width: 13.3rem计算出来的结果为：13.3 * 7.5 ≈ 100
4、height: 46rem计算出来的结果为：46 * 7.5 = 345
5、再串一下计算逻辑得出终极写法：

width: 13.3rem
// 等价于
width: (100px / 7.5) * 1rem
// 等价于
width: (100px / 7.5) * (页面宽度 / 100)
// 等价于
width: (100px / 7.5) * (100vw / 100)
// 等价于
width: (100px * 100vw) / (7.5 * 100)
// 等价于
width: 100vw / 7.5
// 最终可写为
width: calc(100vw / 7.5) // 其中的 100vw 等价于 100

终极写法：假设页面有 Xpx 的，则 CSS 写为calc(Xvw / 7.5)

以上是使用纯手写 CSS 实现的 rem，无任何 JS 代码。

但可以发现需要去记这个写法calc(Xvw / 7.5)，所以若为 MVVM 框架，可借助postcss-px2rem等库实现自动px转rem，就不用去记写法。

补充说明下：
若使用 100 来制定基准：100rem = 原始设计稿宽度宽度
则可以直接用 vw 单位也能实现等比缩放，可以不设置 html 的 font-size 了
因为原始设计稿宽度宽度 = 100vw
假如设计稿给的标准宽度为 750px，其中有个元素为宽 100px，高 345px，写法如下：

.box {
  width: calc(100vw / 7.5);
  height: calc(100vw / 7.5);
}