移动端布局rem换算理解

vw

100vw = 屏幕宽度

vh

100vh = 屏幕高度

根节点字体大小

1rem = 1html 的字体大小

相关参数：

width

initial-scale

maximum-scale

user-scable

 

假设给定设计稿的宽度是750px，按照这样的计算方式得到：

750px = 100vw

100px = 100/(750/100)vw = 100/7.5 vw

100px = 13.33333vw

 

这个时候设置 html 的font-size

html{

font-size:13.33333vw;

}

 

根据 1rem = 1html 的字体大小，可得到 当设置body的width:1rem 的时候，相当于是 13.33333vw。

body{

width:1rem;

height:1rem;

}