微信小程式視圖層WXSS_小程式WXSS
微信小程式的WXSS(WeiXin Style Sheets)是一套樣式語言,用于描述WXML的元件樣式。
WXSS用來決定小程式的WXML的元件應該怎麼顯示。
為了适應廣大的前端開發者,微信小程式的WXSS具有CSS大部分特性。同時為了更适合開發微信小程式,我們對微信小程式的CSS進行了擴充以及修改。
與css相比我們擴充的特性有:
- 尺寸機關
- 樣式導入
尺寸機關
- rpx(responsive pixel): 可以根據螢幕寬度進行自适應。規定螢幕寬為750rpx。如在iPhone6上,螢幕寬度為375px,共有750個實體像素,則750rpx = 375px = 750實體像素,1rpx = 0.5px = 1實體像素。
裝置 | rpx換算px (螢幕寬度/750) | px換算rpx (750/螢幕寬度) |
---|---|---|
iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
iPhone6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |
建議:開發微信小程式時設計師可以用iPhone6作為視覺稿的标準。
注意: 在較小的螢幕上不可避免的會有一些毛刺,請在開發時盡量避免這種情況。
樣式導入
使用
@import
語句可以導入外聯樣式表,
@import
跟需要導入的外聯樣式表的相對路徑,用
;
表示語句結束。
示例代碼:
/** common.wxss **/
.small-p{
padding:;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:;
}
内聯樣式
微信小程式架構元件上支援使用style、class屬性來控制元件的樣式。
- style:靜态的樣式統一寫到class中。style接收動态的樣式,在運作時會進行解析,請盡量避免将靜态的樣式寫進style中,以免影響渲染速度。
- class:用于指定樣式規則,其屬性值是樣式規則中類選擇器名(樣式類名)的集合,樣式類名不需要帶上
,樣式類名之間用空格分隔。.
選擇器
目前支援的選擇器有:
選擇器 | 樣例 | 樣例描述 |
---|---|---|
.class | | 選擇所有擁有class="intro"的元件 |
#id | | 選擇擁有id="firstname"的元件 |
element | | 選擇所有view元件 |
element, element | | 選擇所有文檔的view元件和所有的checkbox元件 |
::after | | 在view元件後邊插入内容 |
::before | | 在view元件前邊插入内容 |
全局樣式與局部樣式
定義在微信小程式app.wxss中的樣式為全局樣式,作用于每一個頁面。在page的wxss檔案中定義的樣式為局部樣式,隻作用在對應的頁面,并會覆寫app.wxss中相同的選擇器。