快捷導(dǎo)航

小程序從零入手之WXSS模版語法匯總

更新時(shí)間：2023年01月05日 11:35:27 作者：codeMak1r.小新

wxss樣式語法包括rpx尺寸單位,樣式導(dǎo)入,全局與局部樣式,常用的樣式屬性,包括尺寸、邊框、邊距、文本、顏色等等,下面這篇文章主要給大家介紹了關(guān)于小程序從零入手之WXSS模版語法匯總的相關(guān)資料,需要的朋友可以參考下

前言

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

WXSS與CSS的關(guān)系

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

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

與CSS相比，WXSS擴(kuò)展的特性有：

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

rpx尺寸單位

什么是rpx呢？

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

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

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

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

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

rpx 與 px之間的單位換算*

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

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

設(shè)備	rpx換算px（屏幕寬度/750）	px換算rpx（750/屏幕寬度）
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

官方建議：在開發(fā)小程序的時(shí)候。設(shè)計(jì)師可以用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中的樣式為全局樣式，作用于每一個(gè)頁面。

2.局部樣式

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

注意：

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

補(bǔ)充知識：超出文本顯示省略號

.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; // 強(qiáng)制英文單詞自動換行
}