微信小程序前端樣式WXSS書寫

發表時間：2021-1-5

發布人：葵宇科技

浏覽次數：17

一. WXSS的簡單介紹

WXSS(WeiXin Style Sheets)是一套樣式語言，用于描述 WXML 的組件樣式。與 css 相比，WXSS 擴展的特性有：

二. 尺寸單位

rpx（responsive pixel）: 可(kě)以根據屏幕寬度進行自适應。規定屏幕寬為750rpx。如(rú)在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

建議： 開發微信小程序時設計師(shī)可(kě)以用 iPhone6 作為視覺稿的标準。

注意： 在較小的屏幕上不可(kě)避免的會有一些毛刺，請在開發時盡量避免這種情況。

三. 樣式導入

使用@import語句可(kě)以導入外聯樣式表，@import後跟需要導入的外聯樣式表的相對路(lù)徑，用;表示語句結束。

示例代碼：

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

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

四. 内聯樣式

框架組件上支持使用 style、class 屬性來控制組件的樣式。

style：靜态的樣式統一寫到 class 中(zhōng)。style 接收動(dòng)态的樣式，在運行時會進行解析，請盡量避免将靜态的樣式寫進 style 中(zhōng)，以免影響渲染速度。

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

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

<view class="normal_view" />

資(zī)源搜索網站(zhàn)大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

五. 選擇器(qì)

目前支持的選擇器(qì)有：

選擇器(qì)	樣例	樣例描述
.class	.intro	選擇所有擁有的組件
#id	#firstname	選擇擁有 id="firstname" 的組件
element	view	選擇所有 view 組件
element, element	view, checkbox	選擇所有文(wén)檔的 view 組件和(hé)所有的 checkbox 組件
::after	view::after	在 view 組件後邊插入内容
::before	view::before	在 view 組件前邊插入内容