微信小程序開發(fā)WXSS

如果你正在尋找一種直接邁進(jìn)前端界面設(shè)計(jì)的方法，那么微信小程序 WXSS 是你不容錯(cuò)過的工具。以下為您介紹 WXSS 的幾個(gè)關(guān)鍵特性：

1. 尺寸單位

WXSS 引入了 rpx（responsive pixel），可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，是微信小程序中推薦使用的尺寸單位之一。

建議：設(shè)計(jì)師可以以 iPhone6 作為視覺稿的標(biāo)準(zhǔn)。

2. 樣式擴(kuò)充

WXSS 具有 CSS 大部分特性，在此基礎(chǔ)上新增了樣式導(dǎo)入功能。

2.1 樣式導(dǎo)入

使用 "@import" 語句可以導(dǎo)入外聯(lián)樣式表，例如：

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

2.2 內(nèi)聯(lián)樣式

組件支持使用 "style"、"class" 屬性來控制樣式，并且支持動態(tài)樣式解析。

• "style" 屬性：靜態(tài)樣式統(tǒng)一寫到 "class" 中，"style" 接收動態(tài)的樣式，在運(yùn)行時(shí)進(jìn)行解析。
• "class" 屬性：指定樣式規(guī)則的類選擇器名（樣式類名）集合，可以用空格分隔各個(gè)樣式類名。

3. 選擇器與全局/局部樣式

WXSS 支持多種選擇器，并支持全局樣式和局部樣式的定義。具體如下：

• 選擇器：支持 ".class"、"#id"、"element"、"element, element"、"::after" 和 "::before"。
• 全局樣式：定義在 "app.wxss" 中的樣式，作用于每一個(gè)頁面。
• 局部樣式：在 page 的 wxss 文件中定義的樣式，僅作用在對應(yīng)的頁面。

以上就是 WXSS 的幾個(gè)重要特性，請參考官方文檔了解更多細(xì)節(jié)。如果您正在尋找一款快速搭建界面的工具，請務(wù)必嘗試微信小程序開發(fā)。感謝您的閱讀！

<本文由himall原創(chuàng)，商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請標(biāo)明：himall原創(chuàng)>