2.4.4 页面样式文件（WXSS）

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

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。

以常规设备为例，这些尺寸换算如表2-1所示。

在设计界面时，如果要实现尺寸自适应，设计师可以用iPhone6作为视觉标准。由于rpx和rem最终要被换算为px，在某些情况下可能会存在除不尽的情况，会导致界面中产生毛刺，这种情况大家要多留意、多测试以尽量避免这种情况。

2．选择器

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

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 { boder : solid 1px #000; }
    /＊ 选择所有view组件且class含有myClass的组件，在其后面插入新内容，内容为new content＊/
    view.myClass::after { content : 'new content' }

3．内联样式

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

    <! --  通过style动态设置样式  -->
    <view style="border:solid 1px #000; background-color:{{color}}"></view>
    <! --  通过class选择器设置样式  -->
    <view class="myClassName1 myClassName"></view>

4．样式导入

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

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

至此，小程序框架页面相关的4个文件已介绍完成，大家对每个文件的功能、内容应该都有了一定了解，在本章最后一节中，我们将探讨小程序的模块化。