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外聯...