wxss样式
WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。
WXSS 用来决定 WXML 的组件应该怎么显示。
为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性
。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。
- 新增了尺寸单位
- WXSS在底层支持新的尺寸单位rpx,可以根据屏幕宽度进行自适应,响应式尺寸单位
- 小程序中全屏尺寸数值是 : 750rpx (100%)
- 与px的换算关系:
设备 | rpx换算px (屏幕宽度/750) | px换算rpx (750/屏幕宽度) |
iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
iPhone6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |
- 提供了全局的样式和局部样式
- 定义在app.wxss中的样式为全局样式,作用于每一个页面
- 在page的wxss文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖app.wxss中相同的选择器
- 此外WXSS仅支持部分CSS选择器,目前支持的选择器有:
选择器 | 样例 | 样例描述 |
.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组件前边插入内容 |