适配方案vw vh

2018-05-15  本文已影响0人  LycorisHerb_ts

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

上一篇下一篇

猜你喜欢

热点阅读