长度单位vw vh vm手机屏幕适配及应用场景

为什么80%的码农都做不了架构师？>>>   

长度单位vw vh vm手机屏幕适配及应用场景

vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。

vmin/vm 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin（即vm）。

vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个。

重要的运用场景：

.square{
width: 30vw;
height: 30vw;
}

活动页，分享等单页面：

body{
height:100vh;
}

 

p{font-size:5vm;}

 

兼容性测试基础环境为：windows系统；IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51

vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，iOS safari 8+支持，Androidbrowser4.4+支持，chrome for android39支持

 

 

转载于:https://my.oschina.net/af666/blog/861627