前端移动端的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