wxss (weixin style sheets)是一套樣式語言,用於描述 wxml 的元件樣式。
wxss 用來決定 wxml 的元件應該怎麼顯示。
與 css 相比,wxss 擴充套件的特性有:
裝置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
注意:在較小的螢幕上不可避免的會有一些毛刺,請在開發時盡量避免這種情況。
使用@import
語句可以匯入外聯樣式表,@import
後跟需要匯入的外聯樣式表的相對路徑,用;
表示語句結束。
示例**:
/** common.wxss **/
.small-p
@import "common.wxss";
.middle-p
框架元件上支援使用 style、class 屬性來控制項的樣式。
目前支援的選擇器有:
選擇器樣例
樣例描述
.class
.intro
選擇所有擁有 class="intro" 的元件
#id#firstname
選擇擁有 id="firstname" 的元件
element
view
選擇所有 view 元件
element, element
view, checkbox
選擇所有文件的 view 元件和所有的 checkbox 元件
::after
view::after
在 view 元件後邊插入內容
::before
view::before
在 view 元件前邊插入內容
1 3 2微信小程式 WXSS
wxss weixin style sheets 是mina框架設計的一套樣式語言,用於描述wxml的元件樣式。wxss用來決定wxml 的元件應該怎麼顯示。與css相比我們擴充套件的特性有 裝置rpx換算px 螢幕寬度 750 px換算rpx 750 螢幕寬度 iphone5 1rpx 0.42p...
微信小程式 小程式樣式WXSS
wxss weixin style sheets 是 套樣式語 於描述 wxml 的元件樣式。與 css 相 wxss 擴充套件的特性有 1.響應式 度單位 rpx rpx responsive pixel 可以根據螢幕寬度進 適應。規定螢幕寬為 750rpx 如在iphone6 上,螢幕寬度為 3...
微信小程式中的WXSS 樣式
wxss是一套樣式語言,用於描述 wxml 的元件樣式,所以說wxss是用來控制wxml。簡單來說,wxml表示頁面有什麼內容,而wxss表示頁面內容放置位置,尺寸大小,顏色等等。wxss 具有 css 大部分的特性,也就是對頁面的樣式進行控制,當然,wxss 也有一些區別於css的擴充和修改。wx...