rem计算推导1.rem是css3单位，其大小根据根元素上的font-size决定。 2.浏览器能显示最小的font-s

rem适配布局

1）问题：px转rem

输入：设计稿宽度uiWidth，设计稿uiPx，移动端屏幕mWidth

输出：以rem为单位的mRem

预备知识：

1.rem是css3单位，其大小根据根元素上的font-size决定。

2.浏览器能显示最小的font-size为12px。所以一般是屏幕宽度除以10

2）rem本质上是等比缩放，公式为：

uiWidth mWidth
-------- = ----------
uiPx mRem

变形：

mWidth * uiPx 10 uiPx
mRem = ------------------ * (mWidth/10) * --------- = -------------- * rem
uiWidth mWidth uiWidth/10

注意：

rem = mWidth/10 当做一个单位

mWidth = document.documentElement.getBoundingClientRect().width

一般uiWidth = 750；所以也可简化为：

uiPx
mRem = ------- * rem
75

3）总结： rem本质上是对屏幕的划分，vw就是出来解决这种问题的单位，但是兼容性不好。