前端移动端的rem适配计算原理

rem是什么？

  rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

计算原理：

1 屏幕宽为 clientWidth(px)。 设计稿宽度为 750 (px), 假设 n = clientWidth(px)/750(px);单位化简===> n= clientWidth/750 ;
2 将 html的 font-size: n(px);
3 则有 n(px) = 1(rem) ,因为1rem为根节点(html节点)字体的大小一倍;
4 假设有一个 div ,在设计稿测量的宽度为 ruleW(px);
5 则需要写入的宽度 width: 设为 w (单位暂不确定)
6 则有 w/clientWidth(px) = ruleW(px)/750(px) 单位化简===> w/clientWidth(px) = ruleW/750
7 化简 w = (clientWidth/750)*ruleW(px) 化简==> w = n*ruleW(px) 转换 w = ruleW * n(px)
8 最后得出 w = ruleW * 1(rem) = ruleW(rem);

结论: 当我们设置html的font-szie为 (屏幕宽度/设计稿宽度) 的px 时
当我们在设计稿上测得的 px 单位值,直接将值换为 rem单位写到代码里面即可,这点与微信小程序的 rpx 单位适配类似

问题: