WXSS用于描述WXML的組件樣式，用于決定WXML的組件應(yīng)該如何顯示。為了適應(yīng)廣大的前端開發(fā)者，它被設(shè)計(jì)為支持CSS中大部分的特性（但是注意是大部分，還是有一些特性是不支持的），并且有一些自己的擴(kuò)展和修改。比如引入了一種新的尺寸單位rpx，還有@import這種外聯(lián)樣式的導(dǎo)入機(jī)制（話說這個(gè)功能不是CSS里也有的么...）

關(guān)于CSS，我就不在這里介紹它的用法了，這個(gè)內(nèi)容實(shí)在有點(diǎn)多，還沒學(xué)習(xí)過CSS的朋友可以自己找一下資料學(xué)習(xí)，我在這里主要想講解一下WXSS和CSS之間的不同之處。

樣式的設(shè)置

在WXML文件中，我們可以通過style和class屬性為組件設(shè)置樣式。不過由于WXML的數(shù)據(jù)綁定功能的存在，我們就可以動(dòng)態(tài)的設(shè)置style和class的屬性值了。比如：

<view style="color:{{color}};padding:{{padding}};">Hello</view>

<view class="message-{{type}}">{{message}}</view>

不過，我們要盡量避免使用style來設(shè)置組件的樣式，最好將樣式定義成樣式規(guī)則放到樣式文件中(.wxss)，然后通過class屬性來設(shè)置。因?yàn)榻M件通過style接收動(dòng)態(tài)樣式，在運(yùn)行時(shí)會(huì)進(jìn)行解析，影響渲染性能。

有限的選擇器

和CSS不一樣，小程序的WXSS支持的選擇器的類型有限，官方文檔中明確列出說支持的，目前只有以下幾種選擇器：

• .class：類選擇器，例如.error-msg，它會(huì)選擇所有class="error-msg"的組件
• #id：ID選擇器，例如#my-container，它會(huì)選擇id="my-container"的組件
• element：元素選擇器，例如view，它會(huì)選擇所有view組件
• element, element：多選擇器，例如view, button，它會(huì)選擇所有view和button組件
• ::after：例如view::after，它會(huì)在view組件后面插入內(nèi)容
• ::before：例如view::after，它會(huì)在view組件前面插入內(nèi)容

其實(shí)自己試了一些在CSS中可用，小程序官方?jīng)]有聲明在WXSS里支持的選擇器，也是可以生效的。但是有些用了就會(huì)把微信web開發(fā)者工具給整崩潰掉，所以，還是不要在實(shí)際開發(fā)中使用這類沒說支持的選擇器了，雖然在有的場(chǎng)景下麻煩了點(diǎn)，但是以上支持了的選擇器還是基本夠用了。

全局樣式與局部樣式

WXSS中有全局樣式與局部樣式之分。

定義在app.wxss文件中的樣式為全局樣式，將會(huì)對(duì)每一個(gè)頁(yè)面起作用。

而定義為page同名的wxss文件，則稱為局部樣式，只會(huì)針對(duì)對(duì)應(yīng)的頁(yè)面起作用，而且樣式優(yōu)先級(jí)比全局樣式要高，可以覆蓋全局樣式。

新的尺寸單位

最后來說一下WXSS中新增和擴(kuò)展的尺寸單位，對(duì)于做屏幕的自適應(yīng)是非常有幫助的。

• rpx (responsive pixel，響應(yīng)式px)，簡(jiǎn)單來說，就是不管什么尺寸的設(shè)備，總是認(rèn)為屏幕寬度是750rpx
• rem (root em，根em)，也很簡(jiǎn)單，就是不管什么尺寸的設(shè)備，總是認(rèn)為屏幕的寬度是20rem。

所以rpx和rem之間的換算，就是：

1rem = (750/20)rpx = 37.5rpx

設(shè)計(jì)師的設(shè)計(jì)稿一般都是按照px來做單位的，那么在開發(fā)階段，開發(fā)人員就需要在px和rpx之間進(jìn)行換算，具體可以如下來計(jì)算：

rpx = (屏幕實(shí)際寬度/750)px
px = (750/屏幕實(shí)際寬度)rpx

因此，如果設(shè)計(jì)師的設(shè)計(jì)是以iphone6屏幕尺寸為參照(iphone6的屏幕寬度為375px)，則：

1rpx = (375/750)px = 0.5px
1px = (750/375)rpx = 2rpx

是不是很容易理解？

好了，關(guān)于微信小程序樣式WXSS的關(guān)鍵點(diǎn)內(nèi)容，就講解到這里，不對(duì)的地方歡迎指正。謝謝啦。