官方文檔地址 https://mp.weixin.qq.com/debu...

問(wèn)題來(lái)了？既然如此，我們?yōu)楹芜€要寫這篇文章？

答案只有一個(gè)，讓你更快的“易懂”，換換思路，接下來(lái)的文章會(huì)對(duì)官方文檔做一個(gè)段落類的解釋。

為了適應(yīng)廣大的前端開(kāi)發(fā)者，WXSS 具有 CSS 大部分 特性。同時(shí)為了更適合開(kāi)發(fā)微信小程序，WXSS 對(duì) CSS 進(jìn)行了擴(kuò)充以及修改。與 CSS 相比，WXSS 擴(kuò)展的特性有：尺寸單位和樣式導(dǎo)入。

補(bǔ)充：關(guān)于擴(kuò)展的特性我們下面會(huì)說(shuō)，既然文檔說(shuō)了WXSS具有CSS 大部分特性，那么有什么不同那？

1、沒(méi)有body

是的，在小程序的每一個(gè)page里是沒(méi)有body屬性的，不過(guò)你可以通過(guò)在wxss中對(duì)page的設(shè)置來(lái)影響整個(gè)頁(yè)面的樣式，比如下面的代碼

page {
    background:#F8F8F8
}

諸如此類，當(dāng)然你也可以設(shè)置page的xxx.json中的backgroundColor屬性來(lái)影響一個(gè)page頁(yè)面下拉時(shí)出現(xiàn)的空白區(qū)域的顏色，一般來(lái)說(shuō)當(dāng)你頁(yè)面有下拉刷新和上拉加載功能時(shí)，往往要設(shè)置backgroundColor屬性。

2、沒(méi)有父子關(guān)系

在使用css的時(shí)候，我們經(jīng)常讓樣式的層級(jí)關(guān)系和html接點(diǎn)的層級(jí)關(guān)系保持一致，比如你的html代碼中有下面代碼

<div class="box">
    <p class="content">
        <strong ></strong>
    </p>
</div>

我們習(xí)慣于css的寫法如下

.box .content strong {}

這樣寫的好處是strong的樣式不會(huì)去影響其他地方的strong。 但是 在小程序中并不支持這種父子的層級(jí)關(guān)系。你只能一個(gè)一個(gè)的設(shè)置，看下面的小程序代碼

<view class="box">
    <text class="box-txt"></text>
</view>

針對(duì)于上面的視圖，對(duì)應(yīng)的wxss應(yīng)該如何寫那？看下面代碼

// 正確的
.box {}
.box-txt {}

// 錯(cuò)誤的
.box .box-txt {}

這樣說(shuō)你明白了吧？！

3、尺寸的變化

在css中我們有很多衡量尺寸的單位，比如px、em等等，當(dāng)然這些在小程序中也依然可以使用，但是小程序又為自己增加了一個(gè)單位，那就是 rpx 。

小程序作為移動(dòng)端的應(yīng)用需要適配不同規(guī)格的設(shè)備并且兼容越來(lái)越大的手機(jī)（ 話說(shuō)我依然喜歡iphone5的尺寸，單手可控而且床上看電影不會(huì)砸到頭 ）。

所以rpx最重要的特性就是可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。它規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

算明白了么？官方給了一個(gè)表格，很淺顯易懂，見(jiàn)下圖。

這個(gè)換算比較簡(jiǎn)單，不在講解，如果你真不懂可以留言。

4、樣式導(dǎo)入

小程序的wxss支持樣式的導(dǎo)入，這個(gè)功能相當(dāng)有用，尤其是我們使用一些其他庫(kù)的時(shí)候可以直接導(dǎo)入第三方的wxss文件，何其樂(lè)哉。

用法也很簡(jiǎn)單，看看下面代碼。

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

5、內(nèi)聯(lián)樣式

和css一樣，wxss支持class和style兩種樣式，但是在用法上還是有區(qū)別的，一句話概括：“如果你的樣式中存在動(dòng)態(tài)內(nèi)容，將其寫到style中，其他的都放到class文件，

比如這段代碼

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

將過(guò)多的樣式寫到style中帶來(lái)的問(wèn)題就是小程序在渲染視圖的時(shí)候還要伴隨著解析對(duì)應(yīng)的樣式布局等，必然對(duì)性能有一些影響。

6、選擇器

另外對(duì)于css中的選擇器，wxss基本都支持了，比如類、ID、組件等，看看下面官方給的圖

而且類似于last-child等css的高級(jí)屬性，在wxss你也可以愉快的使用。

7、全局樣式與局部樣式

原則上一個(gè)在小程序中一個(gè)wxss負(fù)責(zé)一個(gè)wxml視圖文件，但是對(duì)于一個(gè)應(yīng)用來(lái)說(shuō)總會(huì)有一些公用的屬性，因此小程序?yàn)閼?yīng)用自身提供了一個(gè)wxss，那就是app.wxss，當(dāng)然你無(wú)需人工引入，它會(huì)自動(dòng)的加載到每一個(gè)視圖上，這點(diǎn)要記住。

一點(diǎn)總結(jié)

關(guān)于wxss到底對(duì)css支持了哪些，微信官方并沒(méi)有給出相應(yīng)的文檔，更多細(xì)節(jié)我們要慢慢挖掘，畢竟騰訊不是百度，會(huì)把文檔寫的那么好。