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

發表時(shí)間：2021-1-5

發布人(rén)：融晨科技

浏覽次數：36

一. WXSS的(de)簡單介紹

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

尺寸單位
樣式導入

二. 尺寸單位

rpx（responsive pixel）: 可以(yǐ)根據屏幕寬度進行自适應。規定屏幕寬爲(wéi / wèi)750rpx。如在(zài) iPhone6 上(shàng)，屏幕寬度爲(wéi / wèi)375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

設備	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

建議： 開發微信小程序時(shí)設計師可以(yǐ)用 iPhone6 作爲(wéi / wèi)視覺稿的(de)标準。

注意： 在(zài)較小的(de)屏幕上(shàng)不(bù)可避免的(de)會有一些毛刺，請在(zài)開發時(shí)盡量避免這(zhè)種情況。

三. 樣式導入

使用@import語句可以(yǐ)導入外聯樣式表，@import後跟需要(yào / yāo)導入的(de)外聯樣式表的(de)相對路徑，用;表示語句結束。

示例代碼：

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

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

四. 内聯樣式

框架組件上(shàng)支持使用 style、class 屬性來(lái)控制組件的(de)樣式。

style：靜态的(de)樣式統一寫到(dào) class 中。style 接收動态的(de)樣式，在(zài)運行時(shí)會進行解析，請盡量避免将靜态的(de)樣式寫進 style 中，以(yǐ)免影響渲染速度。

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

class：用于(yú)指定樣式規則，其屬性值是(shì)樣式規則中類選擇器名(樣式類名)的(de)集合，樣式類名不(bù)需要(yào / yāo)帶上(shàng).，樣式類名之(zhī)間用空格分隔。

<view class="normal_view" />

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

五. 選擇器

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

選擇器	樣例	樣例描述
.class	.intro	選擇所有擁有的(de)組件
#id	#firstname	選擇擁有 id="firstname" 的(de)組件
element	view	選擇所有 view 組件
element, element	view, checkbox	選擇所有文檔的(de) view 組件和(hé / huò)所有的(de) checkbox 組件
::after	view::after	在(zài) view 組件後邊插入内容
::before	view::before	在(zài) view 組件前邊插入内容

六. 全局樣式與局部樣式

定義在(zài) app.wxss 中的(de)樣式爲(wéi / wèi)全局樣式，作用于(yú)每一個(gè)頁面。在(zài) page 的(de) wxss 文件中定義的(de)樣式爲(wéi / wèi)局部樣式，隻作用在(zài)對應的(de)頁面，并會覆蓋 app.wxss 中相同的(de)選擇器。