关于web app rem 的使用

转自：http://www.qdfuns.com/notes/39070/1cee3f0a2f3939d0ed28a44f874ec9cc.html，感谢分享！

1.拿到设计稿后怎么做？

拿到设计稿后首先确认设计稿的宽度，是320px、375px、640px还是其它宽度。



这里我们假设设计稿为320px。

2.使用如下 js
 

document.documentElement.style.fontSize = $(document.documentElement).width()/3.2 + 'px';
$(window).on('resize', function() {
   document.documentElement.style.fontSize = $(document.documentElement).width()/3.2 + 'px';
})

通过这个 js 设置 html 元素的 font-size 值。

我们设计稿是 320px 宽度的，就在 js 中除以 3.2，是 375px 宽度就除以 3.75,使 html 的 font-size 值为 100px。

PS: 设置为100px是为了方便我们计算rem值。

当屏幕宽度变化时，js 会动态改变 html 的 font-size值。



3.编写css样式

使用js后就可以进行css样式的编写了。rem是基于根元素html的font-size值的，所以，这时候将所有的px单位转化为rem单位来写就可以了。


4.完成

这样就简单高效的实现了 rem 等比适配所有分辨率。