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;}