单位: rem 相对于html(常用于移动端) vw换算rem
如果设计图为640px(iphone 5);
考虑的dpr 2
640px / 2 == 320px;
100vw == 320px;
1vw == 3.2px;
?vw == 100px;
31.25vw == 100px
如果我们规定(这个是自由的,只要给html设置值就行了) 1rem = 100px; (考虑dpr为2)
1rem 要求的rem值
----------------------- = -------------------
100px 设计稿测量值 / 2dpr
得出
要求的rem值 = 设计稿测量值 / 2dpr / 100px
所以我们在规定 1rem 为 100px 时, 换算rem时,还得 除以2dpr, 还是比较麻烦。所以我们要想办法,把 除2dpr去掉
注意等号左边是我们自己规定的,所以我们只要可以规定 2rem = 100px
2rem 要求的rem值
----------------------- = ----------------
100px 设计稿测量值 / 2dpr
这样我们再计算的时候就变成了:
要求的rem值 = 设计稿测量值 / 2dpr * 2rem / 100px
即:
要求的rem值 = 设计稿测量值 / 100px
所以我们可以的得出只要把 1rem 设置成 50px 就可以在转换的时候不用除以 2dpr了。
在刚开始我们以设计稿为640px 算的 31.25vw == 100px 所以 15.625vw == 50px;
所以在rem布局的时候, 我们只要把 html{ font-size: 15.625vw },
这样我们在设计稿中,量出的尺寸直接除以100,就是我们要转换成的rem值了。
如果设计图为750px(iphone 6);
考虑的dpr 2
750px / 2 == 375px;
100vw == 375px;
1vw == 3.75px;
?vw == 100px;
100/3.75≈26.667vw == 100px;
13.333vw == 50px;
根据设计稿为640px的讲解,我们得出 在 1rem 为 50px 时, 要求的rem = 设计稿测量值 / 100 ,原理同上
所以我们,只需要 给 html设置样式为 html{ font-size: 13.333vw } 即可。