關於微信小程式中WXSS的介紹

這篇文章主要介紹了微信小程式WXSS的相關資料,並附簡單實例程式碼，需要的朋友可以參考下

WXSS

WXSS( WeiXin Style Sheets)是MINA設計的一套樣式語言，用來描述WXML的元件樣式。

WXSS用來決定WXML的元件該怎麼顯示。

為了適應廣大的前端開發者，我們的WXSS具有CSS大部分特性。同時為了更適合開發微信小程序，我們對CSS進行了擴充以及修改。

與css比較我們擴充的特性有：

#尺寸單位
樣式導入

尺寸單位

rpx（responsive pixel）: 可依照螢幕寬度進行自適應。規定螢幕寬為750rpx。如在iPhone6上，螢幕寬度為375px，共有750個實體像素，則750rpx = 375px = 750實體像素，1rpx = 0.5px = 1實體像素。

1px = 1.81rpx

裝置	rpx換算px (螢幕寬度/750)	px換算rpx (750/螢幕寬度)
iPhone5	1rpx = 0.42px	1px = 2.34px
#iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6s	1rpx = 0.552px	#1px = 1.81rpx = 0.552px

rem（root em）: 規定螢幕寬度為20rem；1rem = (750/20)rpx 。

建議：開發微信小程式時設計師可以用iPhone6作為視覺稿的標準。

樣式匯入

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

範例程式碼：

/** common.wxss **/
.small-p{
 padding:5px;
}

#

/** app.wxss **/
@import "common.wxss";
.middle-p:{
 padding:15px;
}

內聯樣式

MINA元件上支援使用style、class屬性來控制元件的樣式。

style：靜態的樣式統一寫到class中。 style接收動態的樣式，在執行時會解析，所以不要將靜態的樣式寫進style中，以免影響渲染速度。

<view style="color:{{color}};" />

class：用於指定樣式規則，其屬性值是樣式規則中類別選擇器名稱(樣式類別名稱)的集合，樣式類別名稱不需要帶上.，樣式類別名稱之間用空格分隔。

<view class="normal_view" />

選擇器

目前支援的選擇器有：範例描述#選擇所有擁有class="intro"的元件#選擇擁有id="firstname"的元件選擇所有view元件選擇所有文件的view元件和所有的checkbox元件#在view元件後邊插入內容在view元件前邊插入內容

	選擇器	範例
	.class	.intro
	#id	#firstname
	element	view
	element, element	view checkbox
	::after	view::after
	::before	view::before

##全域樣式與局部樣式

定義在app.wxss中的樣式為全域樣式，作用於每個頁面。在page的wxss檔案中定義的樣式為局部樣式，只作用在對應的頁面，並會覆寫app.wxss中相同的選擇器。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

關於微信小程式slider的介紹

#關於微信小程式實作頂部選項卡(swiper )的介紹

關於微信JS-SDK選取手機照片上傳的功能

###

以上是關於微信小程式中WXSS的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！