微信小程序学习之路——页面样式文件(WXSS)

WXSS(WeiXin Style Sheets)是基于CSS拓展的样式语言，用于描述WXML的组件样式，决定WXML组件该怎么显示，它具有CSS的大部分特性，在CSS基础上WXSS拓展了尺寸单位、样式导入特性，对CSS选择器属性上做了部分兼容。在开发过程中不能想当然地使用CSS属性，一定要使用IOS和Android真机进行调试，本小节主要讲述WXSS和CSS的不同点，后续布局会讲解CSS盒子模型布局相关属性，其余属性大家可以参考W3C规范，在开发过程中，我们一定要开启开发者工具中"开启上传代码样式文件自动补全"功能，主要小程序会自动补全其余一些样式的兼容性写法，保证在不同终端达到统一视觉效果。

1.尺寸单位

CSS中原有尺寸单位在不同尺寸屏幕中不能完美实现元素按比例缩放，WXSS在此基础上拓展了两种尺寸单位：rpx(responsive pixel)和rem(root em)，这两种尺寸单位都是相对相对，最终会被换算成px，使用rpx和rem布局页面能让页面界面在不同尺寸屏幕中按比例缩放。

1）rpx

在渲染过程中rpx会按比例转换为px，WXSS规定屏幕宽度为750rpx，如在iPhone6中，屏幕宽度为375px，即750rpx=375px，那么在iPhone6中1rpx=0.5px

2）rem

同rpx一样，WXSS规定屏幕宽度20rem，同样在IPhone6中，屏幕宽度为375px，即20rem=375px，所以在iPhone6中1rem=18.75px。

详情请看官方文稿：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

2.选择器

CSS选择器用于选择需要添加样式的元素，WXSS实现了CSS的部分选择器，使用规则也和CSS一样，熟悉CSS的同学会很快上手

WXSS和CSS代码结构一样，一段样式前面是选择器，后面是以大括号括起来的样式组合，每个样式以分号结束，如下所示：

选择器{样式1；样式2}；

选择器使用规则和CSS也是一致的，如下所示：

/*选择所以class和含myClass的组件，并设置边框*/
.myClass{border: solid 1px #000;}
/*选择所有view组件且class含有myClass的组件，并设置边框*/
view.myClass{border: solid 1px #000;}
/*选择所有view组件中子节点class含有myClass的组件，并设置边框*/
view .myClass{border: solid 1px #000;}
/*选所有class含有myContent组件中所有checkbox组件和radiobox组件，并设置它们的边框*/
.myContent checkbox,
.myContent radiobox{border: solid 10px #000;}
/*选择所有view组件且class含有myClass的组件，在其后面插入新内容，新内容为new content*/
view.myClass:after{contain: 'new content'}

3.内联样式

同HTML一样，样式除了写在WXSS文件中，也可以通过设置style、class属性控制样式，一般静态样式可以统一写到class中，style样式会在运行时解析，如非特别需要，尽量避免将静态样式写入style，避免影响渲染速度，如：

4.样式导入

通常在项目中为了便于管理会将WXSS按职责拆分为多个文件，这时便需要@Import语句在当前WXSS文件中导入其它WXSS文件，@import后写入需要导入WXSS文件的相对路径，用“；”表示语句结束，如：

.common-view{border: solid 1px #000;}
@import ".common-view";
.page-container{padding: 10px;}