前言

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

WXSS與CSS的關(guān)系

WXSS（WeiXin Style Sheets）是一套樣式語言，用于美化WXML的組件樣式，類似于網(wǎng)頁開發(fā)中的CSS。

WXSS具有CSS大部分的特性，同時，WXSS還對CSS進行了擴充以及修改，以適應(yīng)小程序的開發(fā)。

與CSS相比，WXSS擴展的特性有：

• rpx 尺寸單位
• @import樣式導(dǎo)入

rpx尺寸單位

什么是rpx呢？

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

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

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

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

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

rpx 與 px之間的單位換算*

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

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

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

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

樣式導(dǎo)入

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

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

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

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

全局樣式和局部樣式

1.全局樣式

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

2.局部樣式

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

注意：

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

補充知識：超出文本顯示省略號

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

總結(jié)

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

最新評論