微信小程式 小程式樣式WXSS

2021-10-04 01:27:38 字數 1132 閱讀 1308

wxss( weixin style sheets )是⼀套樣式語⾔,⽤於描述 wxml 的元件樣式。

與 css 相⽐,wxss 擴充套件的特性有:

1. 響應式⻓度單位 rpx

rpx(responsive pixel): 可以根據螢幕寬度進⾏⾃適應。規定螢幕寬為 750rpx 。如在iphone6 上,螢幕寬度為 375px ,共有750個物理畫素,則 750rpx = 375px = 750物理畫素,1rpx = 0.5px = 1物理畫素 。

假設我們在實際生活中拿到乙個未知寬度(設為page px)的設計稿,設計稿page存在乙個元素寬度100px,我們該如何進行轉化。

[1] 轉化

page px = 750rpx

1px = 750rpx /page

100 px = 750rpx * 100 /page

假設 page = 375px

[2] 賦值

進行相應值編寫時,不能直接使用 750rpx * 100 /375

得利用乙個屬性calc屬性(css 和 wxss都支援的乙個屬性)

這個屬性的語法要求:

1)750 和rpx中間不要留空格

2) 運算子兩邊不要留空格

wxss的內容

view
2. 樣式導⼊

[1] wxml檔案的樣式預設是根據它前面的名字獲取的,

[2] 引入自定義樣式時,可以通過**@import來引入,路徑只能寫相對路徑**

樣式檔案

wxss檔案

@import

"../../style/common.wxss"

;

3.選擇器

特別需要注意的是 ⼩程式 不⽀持萬用字元 * 因此以下**⽆效!

*

目前支援的選擇器有:

微信小程式中的WXSS 樣式

wxss是一套樣式語言,用於描述 wxml 的元件樣式,所以說wxss是用來控制wxml。簡單來說,wxml表示頁面有什麼內容,而wxss表示頁面內容放置位置,尺寸大小,顏色等等。wxss 具有 css 大部分的特性,也就是對頁面的樣式進行控制,當然,wxss 也有一些區別於css的擴充和修改。wx...

1 3 2微信小程式 WXSS

wxss weixin style sheets 是mina框架設計的一套樣式語言,用於描述wxml的元件樣式。wxss用來決定wxml 的元件應該怎麼顯示。與css相比我們擴充套件的特性有 裝置rpx換算px 螢幕寬度 750 px換算rpx 750 螢幕寬度 iphone5 1rpx 0.42p...

微信小程式開發框架 WXSS(二)

一 外聯樣式引入 1.wxss除了支援響應式的畫素 還支援外聯樣式的匯入。外聯樣式通過 import標誌符來引入的,外聯樣式好處 當我們不 同頁面內具有相同樣式的元素時可以把,相同樣式的元素處理成外聯樣式檔案,以減少檔案資源的大小。2.如何用 import引入外聯樣式檔案?在index.wxml外聯...