前言

上篇文章詳細(xì)講解了微信小程序WXML模版語(yǔ)法，比如條件渲染｜列表渲染的一些基本使用，這篇文章將帶領(lǐng)大家學(xué)習(xí)的是小程序的「WXSS模版語(yǔ)法」

WXSS與CSS的關(guān)系

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)入

rpx尺寸單位

什么是rpx呢？

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

在小程序編程中，我們開(kāi)發(fā)者需要適配用戶不同大小的手機(jī)屏幕，我們就需要使用到rpx這一尺寸單位。

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

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

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

rpx 與 px之間的單位換算*

在Iphone6上，屏幕寬度為 375px，共有750個(gè)物理像素，等分為 750rpx。則：

• 750rpx = 375px = 750物理像素
• 1rpx = 0.5px = 1物理像素

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

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

樣式導(dǎo)入

使用WXSS提供的@import語(yǔ)法，可以導(dǎo)入外聯(lián)的樣式表。

@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑，用；表示語(yǔ)句結(jié)束，示例：

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

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

全局樣式和局部樣式

1.全局樣式

定義在app.wxss中的樣式為全局樣式，作用于每一個(gè)頁(yè)面。

2.局部樣式

在頁(yè)面的.wxss文件中定義的樣式為局部樣式，只作用于當(dāng)前頁(yè)面。

注意：

• 當(dāng)局部樣式與全局樣式?jīng)_突的時(shí)候，根據(jù)就近原則，局部樣式會(huì)覆蓋全局樣式；
• 當(dāng)局部樣式的權(quán)重大于或等于全局樣式的權(quán)重時(shí)，才會(huì)覆蓋全局樣式。

補(bǔ)充知識(shí)：超出文本顯示省略號(hào)

.box {
   width: xxx; // 寬度
   display: -webkit-box; // 設(shè)置為彈性盒子。非標(biāo)準(zhǔn)屬性，所以要加兼容性代碼
   -webkit-box-orient: vertical;  // 從上到下垂直排列子元素
   -webkit-line-clamp: 1; // 顯示幾行文本。設(shè)置為第一行超出后顯示省略號(hào)
   overflow: hidden; // 超出隱藏
   text-overflow: ellipsis; // 顯示省略號(hào)
   word-break: break-all; // 強(qiáng)制英文單詞自動(dòng)換行
}

總結(jié)

到此這篇關(guān)于小程序從零入手之WXSS模版語(yǔ)法匯總的文章就介紹到這了,更多相關(guān)小程序WXSS模版語(yǔ)法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論