rem计算推导

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就是出来解决这种问题的单位，但是兼容性不好。