移动端开发vw+rem布局 即等比缩放布局（什么是vw?如何设置根元素html的字体大小？如

1 什么是vw?

vw是一种视窗单位，也是相对单位。相对于视口的宽度，视口被均分为100单位的vw。能够实现页面内的字体大小跟随视口的大小而改变。

1vw 视口宽度的1%

100vw 视口宽度的100%

1vh 视口高度的1%

100vh 视口高度的100%

2为什么要将根元素html字体大小设置为100px？

是为了方便计算。

我们都知道，根元素默认的字体大小是12px,即 html{font-size:12px;}

那在默认的情况下，如果我们在二倍图的设计稿上量取的是88px,除以2，就为44px,再除以12，会得到除不尽的小数。而且除以12不好计算。

但是可能有人会觉得除以10也好计算，为什么不取10呢？原因是12px已经是font-size的最小值了。

所以除以100是比较合适的,因为只需要小数点向前移动两位。

html{font-size:100px;}

3如何把100px换算成vw？（根据设计稿机型换算vw）

根据设计稿的手机型号来进行换算。

如何判断UI给的二倍图的设计稿是什么手机型号呢？

例子：用ps之类的软件打开UI给的二倍图的设计稿，如果测量得到的是750px,除以2后就是375px，即该设计稿的机型是iPhone6。

现在我们知道的设计稿是什么机型，那就可以开始换算vw单位了。

- 根据设计稿iphone5:320px=100vw

根元素最终设置为：html{font-size:31.25vw;}

换算演示： 1px=100vw/320px=0.3125vw 100px=31.25vw 这样就完成了100px换算成对应屏幕大小的单位为vw的数值。iphone6的vw换算也是同理。

- 根据设计稿iphone6:375px=100vw（现在大部分的设计稿是iphone6）

根元素最终设置为：html{font-size:26.67vw;}

移动端开发步骤详解：/m0_59850169/article/details/119388317

关于什么是vw的更详细说明：/weixin_39860108/article/details/111808198

移动端开发vw+rem布局 即等比缩放布局（什么是vw?如何设置根元素html的字体大小？如何换算vw单位？文末：移动端开发步骤详解链接）