微信小程式樣式wxss
阿新 • • 發佈:2021-10-11
WXSS(WeiXin Style Sheets)是一套用於小程式的樣式語言,用於描述WXML的元件樣式,也就是視覺上的效果。
WXSS與Web開發中的CSS類似。為了更適合小程式開發,WXSS對CSS做了一些補充以及修改。
1、尺寸單位
在WXSS中,引入了rpx(responsive pixel)尺寸單位。引用新尺寸單位的目的是,適配不同寬度的螢幕,開發起來更簡單。
在小程式中,規定所有手機的螢幕寬度都是750rpx,所以在不同尺寸的螢幕下1rpx的寬度都不同。
1rpx = (螢幕寬度/750)px
在iphone6手機下,螢幕寬度是375px,所以1rpx=0.5px。
2、樣式的匯入
在wxss中匯入
@import '../index/index.wxss'
由於WXSS最終會被編譯打包到目標檔案中,使用者只需要下載一次,在使用過程中不會因為樣式的引用而產生多餘的檔案請求。
3、樣式選擇器
目前支援的樣式選擇器