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