## WXSS ### 尺寸單位 | 設備 | rpx換算px(屏幕寬度/750) | px換算rpx(750/屏幕寬度) | | --- | --- | --- | | iPhone5 | 1rpx = 0.42px | 1px = 2.34px | | iPhone6 | 1rpx = 0.5px | 1px = 2rpx | | iPhone6 Plus | 1rpx = 0.6=552px | 1px = 1.81rpx | ### 樣式導入 使用@import語句可以導入外聯樣式表，@import后跟需要導入的外聯樣式表的相對路徑，用;表示語句結束。 ~~~ /** common.wxss **/ .small-p { padding:5px; } ~~~ ~~~ /** app.wxss **/ @import "common.wxss"; .middle-p { padding:15px; } ~~~ ### 內聯樣式 框架組件上支持使用 style、class 屬性來控制組件的樣式。 * style：靜態的樣式統一寫到 class 中。style 接收動態的樣式，在運行時會進行解析，請盡量避免將靜態的樣式寫進 style 中，以免影響渲染速度。 ~~~ <view style="color:{{color}};" /> ~~~ * class：用于指定樣式規則，其屬性值是樣式規則中類選擇器名(樣式類名)的集合，樣式類名不需要帶上.，樣式類名之間用空格分隔。 ~~~ <view class="normal_view" /> ~~~ ### 選擇器 | 選擇器 | 樣例 | 樣例描述 | | --- | --- | --- | | .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組件前邊插入內容 |