主題邦科技在之前的文章跟大家分享過(guò)微信小程序開(kāi)發(fā)教程，包括JSON配置、WXML模板等，今天跟大家分享一下微信小程序開(kāi)發(fā)WXSS樣式詳解。

WXSS(WeiXin Style Sheets)是一套樣式語(yǔ)言，用于描述 WXML 的組件樣式。WXSS具有CSS 大部分的特性，小程序在 WXSS 也做了一些擴(kuò)充和修改。

1、新增了尺寸單位。在寫(xiě) CSS 樣式時(shí)，開(kāi)發(fā)者需要考慮到手機(jī)設(shè)備的屏幕會(huì)有不同的寬度和設(shè)備像素比，采用一些技巧來(lái)?yè)Q算一些像素單位。WXSS 在底層支持新的尺寸單位 rpx ，開(kāi)發(fā)者可以免去換算的煩惱，只要交給小程序底層來(lái)?yè)Q算即可，由于換算采用的浮點(diǎn)數(shù)運(yùn)算，所以運(yùn)算結(jié)果會(huì)和預(yù)期結(jié)果有一點(diǎn)點(diǎn)偏差。

rpx（responsive pixel）: 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。微信小程序開(kāi)發(fā)時(shí)設(shè)計(jì)師可以用 iPhone6 作為視覺(jué)稿的標(biāo)準(zhǔn)。

2、提供了全局的樣式和局部樣式。和前邊 app.json, page.json 的概念相同，你可以寫(xiě)一個(gè) app.wxss 作為全局樣式，會(huì)作用于當(dāng)前小程序的所有頁(yè)面，局部頁(yè)面樣式 page.wxss 僅對(duì)當(dāng)前頁(yè)面生效。

3、此外 WXSS 僅支持部分 CSS 選擇器

主題邦科技——靠譜的技術(shù)伙伴，為企業(yè)提供一站式技術(shù)服務(wù)。主要業(yè)務(wù)范圍有：APP開(kāi)發(fā)、小程序開(kāi)發(fā)、微信開(kāi)發(fā)、電商系統(tǒng)開(kāi)發(fā)、物聯(lián)網(wǎng)（IOT）開(kāi)發(fā)等互聯(lián)網(wǎng)+領(lǐng)域。

小程序開(kāi)發(fā)：www.litwuoo.com

微信點(diǎn)餐系統(tǒng)：www.litwuoo.com/article_278.html

微信小程序申請(qǐng)：www.litwuoo.com/article_298.html