vw：相对于视窗的宽度[视窗的宽度是100vw]【视窗window.innerWidth】
vh：相对于视窗的高度[视窗的高度是100vh]
vmin:视口宽度或高度，选择小的那个
vmax:视口宽度或高度，选择大的那个
与stylus结合使用vw vh 单位
以iphone6尺寸作为基准
$vw_base = 750
vw_count(x)
(x / 750)*100vw
.item
height vw_count(100) //在设计图上item元素高度为100
line-height vw_count(100)
rem和vw vh结合实现布局优化
给根元素设置随着饰扣变化而变化的vw单位，实现动态改变其大小
限制根元素字体大小的最大最小值，配合body加上最大宽度和最小宽度
以psd750尺寸作为基准
$vw_fontsize = 75
rem($px)
($px / $vw_font-size) * 1rem // 1rem 对应设计图的尺寸为75px
html{
font-size : 10vw // ( 75px / 750 ) * 100vw
}
.item
height rem(100) //在设计图上item元素的告诉为100px
网友评论