vw:相對于視窗的寬度[視窗的寬度是100vw]【視窗window.innerWidth】
vh:相對于視窗的高度[視窗的高度是100vh]
vmin:視口寬度或高度,選擇小的那個(gè)
vmax:視口寬度或高度僚楞,選擇大的那個(gè)
與stylus結(jié)合使用vw vh 單位
以iphone6尺寸作為基準(zhǔn)
$vw_base = 750
vw_count(x)
? ????(x / 750)*100vw
.item
? ? height vw_count(100)? //在設(shè)計(jì)圖上item元素高度為100
? ? line-height vw_count(100)
rem和vw vh結(jié)合實(shí)現(xiàn)布局優(yōu)化
給根元素設(shè)置隨著飾扣變化而變化的vw單位肩杈,實(shí)現(xiàn)動(dòng)態(tài)改變其大小
限制根元素字體大小的最大最小值昆箕,配合body加上最大寬度和最小寬度
以psd750尺寸作為基準(zhǔn)
$vw_fontsize = 75
rem($px)
? ? ($px / $vw_font-size) * 1rem? ? ?// 1rem 對應(yīng)設(shè)計(jì)圖的尺寸為75px
html{
? ? font-size : 10vw //? ( 75px / 750 ) * 100vw
}
.item
? ? height? rem(100)? //在設(shè)計(jì)圖上item元素的告訴為100px