rem原理

rem.js

封装rem.js

解析:

rem其实是一个相对单位,是一个相对于根html的font-size字号,html默认font-size大小为16px.则这是1rem=16px

假设这时候我们产品经理要求基于iphone6的尺寸为基准值,ui小改改给的设计稿是基于iphone6的尺寸375px的设计稿

我们可以通过var  clientWidth = document.documentElement.clientWidth 获取设备的尺寸

clientWidth/iphone6 = 新设备的fontsize / 16px

新设备的fontsize = (16*clientWidth ) / iphone6尺寸

因此可以得出结论:新设备html,fontsize = 设备尺寸/基准值 *  100

如果为了方便计算,可以把根元素的html的font-size改为100px,则在书写css样式时候,100px = 0.1rem