什么是WXSS？相比CSS有哪些擴(kuò)展特性？

WXSS (WeiXin Style Sheets)是一套樣式語(yǔ)言，用于美化 WXML 的組件樣式，類似于網(wǎng)頁(yè)開(kāi)發(fā)中的 CSS。WXSS 具有 CSS 大部分特性，同時(shí)，WXSS 還對(duì) CSS 進(jìn)行了擴(kuò)充以及修改，以適應(yīng)微信小程序的開(kāi)發(fā)。與 CSS 相比，WXSS  擴(kuò)展的特性有：

  ? rpx 尺寸單位

  ? @import 樣式導(dǎo)入

1. 什么是rpx 尺寸單位

rpx(responsive pixel)是微信小程序獨(dú)有的，用來(lái)解決屏適配的尺寸單位。

2. rpx 的實(shí)現(xiàn)原理

rpx 的實(shí)現(xiàn)原理非常簡(jiǎn)單：鑒于不同設(shè)備屏幕的大小不同，為了實(shí)現(xiàn)屏幕的自動(dòng)適配，rpx 把所有設(shè)備的屏幕，在寬度上等分為750 份(即：當(dāng)前屏幕的總寬度為750rpx)。

  ? 在較小的設(shè)備上，1rpx 所代表的寬度較小

  ? 在較大的設(shè)備上，1rpx 所代表的寬度較大

小程序在不同設(shè)備上運(yùn)行的時(shí)候，會(huì)自動(dòng)把rpx 的樣式單位換算成對(duì)應(yīng)的像素單位來(lái)渲染，從而實(shí)現(xiàn)屏幕適配。

官方建議：開(kāi)發(fā)微信小程序時(shí)，設(shè)計(jì)師可以用 iPhone6 作為視覺(jué)稿的標(biāo)準(zhǔn)。

開(kāi)發(fā)舉例：在 iPhone6 上如果要繪制寬100px，高20px的盒子，換算成rpx單位，寬高分別為 200rpx 和 40rpx。