转载-微信小程序-wxss

wxss

wxss(weixin style sheets) 是
一套样式语言，用于描述wxml的组件样式
决定wxml的组件应该怎么显示

一 尺寸单位

rpx（responsive pixel）：可以根据屏幕宽度进行自适应

rem（root em）：规定屏幕宽度为20rem

尺寸单位.png

建议：
开发时候，设计师可以用iphone6作为视觉稿的标准
在较小的屏幕上，不可避免会有一些毛刺，尽量避免

二 样式导入

使用@import语句可以导入外联样式表
@import后跟需要导入的外联样式表的相对路径

样式导入.png

三 内联样式

框架组件上支持使用style，class属性来控制组件的样式
style：静态的样式统一写到class中
style接收动态的样式，运行时候进行解析
避免将静态的样式写进style中，避免影响渲染速度

class：用于指定样式规则，
属性值是样式规则中类选择器的集合
样式类名不需要带上.
样式类名之间空格分隔

四 选择器

选择器.png

五 全局样式和局部样式

定义在app.wxss中的是全局样式
定义在page的wxss中为局部样式
局部样式只能作用在对应的页面，
会覆盖全局样式中相同的选择器