微信小程式中的WXSS 樣式

2021-08-17 19:33:45 字數 1002 閱讀 8440

wxss是一套樣式語言,用於描述 wxml 的元件樣式,所以說wxss是用來控制wxml。

簡單來說,wxml表示頁面有什麼內容,而wxss表示頁面內容放置位置,尺寸大小,顏色等等。

wxss 具有 css 大部分的特性,也就是對頁面的樣式進行控制,當然, wxss 也有一些區別於css的擴充和修改。

wxss區別有css的地方有

(1)尺寸單位

rpx(responsive pixel): 可以根據螢幕寬度進行自適應。

規定螢幕寬為750rpx。如在 iphone6 上,螢幕寬度為375px,共有750個物理畫素,則750rpx = 375px = 750物理畫素,1rpx = 0.5px = 1物理畫素。

(2)樣式匯入

使用@import語句可以匯入外聯樣式表,@import後跟需要匯入的外聯樣式表的相對路徑,用;表示語句結束。

如:

/** common.wxss **/

.small-p

在引用common.wxss時候,

@import "common.wxss";                    /** 匯入外聯樣式 **/

.middle-p

wxss裡的選擇器

目前常用的選擇器有:

(1).class (.intro)表示選擇所有擁有 class="intro" 的元件

(2)#id (#firstname )表示選擇擁有 id="firstname" 的元件

(3)element(如 view)表示選擇所有 view 元件

(4)element, element(如view, checkbox )選擇所有文件的 view 元件和所有的 checkbox 元件

(5)::after (如view::after)表示在 view 元件後邊插入內容

(6)::before   (如view::before)表示在 view 元件前邊插入內容

微信小程式 小程式樣式WXSS

wxss weixin style sheets 是 套樣式語 於描述 wxml 的元件樣式。與 css 相 wxss 擴充套件的特性有 1.響應式 度單位 rpx rpx responsive pixel 可以根據螢幕寬度進 適應。規定螢幕寬為 750rpx 如在iphone6 上,螢幕寬度為 3...

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 擴充套件的特性有 尺寸單位和樣式匯入。rpx 可以根據螢幕寬度進行自適應。規定螢幕寬為750rpx。如 在 iphone6 上,螢幕寬度為375px,共有750個物理畫素,則...