微信小程序樣式 WXSS詳解
1.尺寸單位
rpx（responsive pixel）: 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
計(jì)算方法:加一個(gè)屬性 calc
1.注意計(jì)算表達(dá)示中任何位置不要加空格
2.錯(cuò)誤寫(xiě)法: width:750prx*100/375
3.正確寫(xiě)法: width:calc(750prx*100/375)
2.樣式導(dǎo)入
使用@import語(yǔ)句可以導(dǎo)入外聯(lián)樣式表，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑，用;表示語(yǔ)句結(jié)束。
3.內(nèi)聯(lián)樣式
框架組件上支持使用 style、class 屬性來(lái)控制組件的樣式。
4.選擇器
注意小程序中是不識(shí)別通配符 *
| 選擇器 | 樣例 | 樣例描述 |
|---|---|---|
| .class | .intro | 選擇所有擁有 class="intro" 的組件 |
| #id | #firstname | 選擇擁有 id="firstname" 的組件 |
| element | view | 選擇所有 view 組件 |
| element, element | view, checkbox | 選擇所有文檔的 view 組件和所有的 checkbox 組件 |
| ::after | view::after | 在 view 組件后邊插入內(nèi)容 |
| ::before | view::before | 在 view 組件前邊插入內(nèi)容 |
5.全局樣式與局部樣式
定義在 app.wxss 中的樣式為全局樣式，作用于每一個(gè)頁(yè)面。在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對(duì)應(yīng)的頁(yè)面，并會(huì)覆蓋 app.wxss 中相同的選擇器。
6.小程序中的 less 語(yǔ)法(在vscode編輯器 中 加入插件Easy LESS) 可以將less文件自動(dòng)轉(zhuǎn)換成wxss文件
參考文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html
