您當前位置>首頁 » 新聞資訊 » 小(xiǎo)程序相(xiàng)關 >
微(wēi)信小(xiǎo)程序前端樣式WXSS書(shū)寫
發表時(shí)間(jiān)：2021-1-5
發布人(rén)：葵宇科(kē)技(jì)
浏覽次數(shù)：39
一(yī). WXSS的(de)簡單介紹
WXSS(WeiXin Style Sheets)是(shì)一(yī)套樣式語言， ≥用(yòng)于描述 WXML 的(de)組件(jiàn)樣式。與 css ☆βδ;相(xiàng)比，WXSS 擴展的(de)特性有(yǒu)：
- 尺寸單位
- 樣式導入
二. 尺寸單位
rpx（responsive pixel）: 可(kě)以根據屏幕α₽☆₩寬度進行(xíng)自(zì)适應。規定屏幕寬為(wèi)750rpx。如(rú)在 ☆★γ↑iPhone6 上(shàng)，屏幕寬度為(wèi)375px，共有(yǒu)7£ β50個(gè)物(wù)理(lǐ)像素，則750rpx>÷α = 375px = 750物(wù)理(lǐ)像素，1rpx = 0.5÷×"px = 1物(wù)理(lǐ)像素。
| 設備 | rpx換算(suàn)px (屏幕寬度/750) | px換算(suàn)rpx (750/屏幕寬度) |
|---|---|---|
| iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
| iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
| iPhone6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |
建議(yì)： 開(kāi)發微(wēi)信小(xiǎo)程序時(shí)設₩•£計(jì)師(shī)可(kě)以用(yòng) iPhon₩<e6 作(zuò)為(wèi)視(shì)覺稿的(de)标準 $α←。
注意： 在較小(xiǎo)的(de)屏幕上(shàng)不(bù)可(kě)避免的(de)會€☆¥(huì)有(yǒu)一(yī)些(xiē)毛刺，請(qǐng)在開>•(kāi)發時(shí)盡量避免這(zhè)種情況。
三. 樣式導入
使用(yòng)@import語句可(kě)以導入外(wài)聯樣式表，@import後跟®≤需要(yào)導入的(de)外(wài)聯樣式表的(©de)相(xiàng)對(duì)路(lù)徑，用(yòφ₩ng);表示語句結束。
示例代碼：
/** common.wxss **/
.small-p {
padding:5px;
}/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}四. 內(nèi)聯樣式
框架組件(jiàn)上(shàng)支持使用(yòng) style、™λ↕class 屬性來(lái)控制(zhì)組件(jiàn)的(de)樣式。
style：靜(jìng)态的(de)樣式統一(yī)寫到(dàoΩ ) class 中。style 接收動态的(de)樣式，在運行(xíng)時☆♠&(shí)會(huì)進行(xíng)解析，請(qǐ€¥♠αng)盡量避免将靜(jìng)态的(de)樣式寫進 style 中，以免影(yǐng)響渲染"★速度。
<view style="color:{{color}};" />
class：用(yòng)于指定樣式規則，其屬性值是(shì)樣式規則中類選擇器(qì)名(樣式<✔™≠類名)的(de)集合，樣式類名不(bù)需要(yào)帶上↕←(shàng).，樣式類名之間(jiān)用(yòng)≥©空(kōng)格分(fēn)隔。
<view class="normal_view" />資源搜索網站(zhàn)大(dà)全 https://www.renrenfan.com♦∞∞.cn 廣州VI設計(jì)公司https://www.houdianzi.com
五. 選擇器(qì)目前支持的(de)選擇器(qì)有(yǒu)：
| 選擇器(qì) | 樣例 | 樣例描述 |
|---|---|---|
| .class | .intro | 選擇所有(yǒu)擁有(yǒu) 的(de)組件(jiàn) |
| #id | #firstname | 選擇擁有(yǒu) id="firstname" 的(de¶©)組件(jiàn) |
| element | view | 選擇所有(yǒu) view 組件(jiàn) |
| element, element | view, checkbox | 選擇所有(yǒu)文(wén)檔的(de) view 組件(jiàn)和(h± é)所有(yǒu)的(de) checkbox 組件(jiàn) |
| ::after | view::after | 在 view 組件(jiàn)後邊插入內(nèi)容 |
| ::before | view::before | 在 view 組件(jiàn)前邊插入內(nèi)容 |
六. 全局樣式與局部樣式
定義在 app.wxss 中的(de)樣式為(wèi)全局樣式，作(zuò)用☆<&(yòng)于每一(yī)個(gè)頁面。在 page 的(de) wxss 文(wén♦₹ε)件(jiàn)中定義的(de)樣式為(wèi)局部∞↓樣式，隻作(zuò)用(yòng)在對(duì)應的(de)頁σ≥∞'面，并會(huì)覆蓋 app.wxss 中相(xiàng)同的(de)選擇器(qì)。
