rem.js px为多少rem

JavaScript034

rem.js px为多少rem,第1张

rem是一个相对大小的值，它相对于根元素<html>，

设置html的字体大小的值为html｛font-size: 87.5%｝（也就是14px）。

然后其他的字体就是将要的值除以14得到的值；

比如默认的twentytwelve主题大小是960px；换算成rem就是960/14=68.57142857142857rem；

padding的24px也就是24/14=1.714285714285714rem，以此类推。

一般所有浏览器的html根元素font-size:16px

1rem = 16px

所以所有px值都基于它来换算

设计稿px/换算的rem = 16px / 1 ===> 换算的rem= 设计稿px/16px

一般我们拿到的移动端设计稿是基于iphone6的

所以一般以这个确定的屏幕做参考

iphone6的屏幕宽度为375px

所以设置基准rem = 375 /10 =37.5

为啥/10，这个无所谓，只是一个自定义规定，为了让根px不要那么大

除了设置html根元素上的font-size之外，还要配合flexible.js使用

什么是flexible.js？看下源码

参考： http://dwbbb.com/blog/flexible/

https://www.jianshu.com/p/3a07024963d9

其实flexible.js的主要作用是：

1、为html添加data-dpr属性和style属性，style添加font-size作为1rem的基准值。

2、改写meta标签，根据dpr设置设备的缩放比。