## 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组件前边插入内容 |