WXSS用于描述WXML的组件样式，具有大部分CSS特性，同时为适应微信小程序开发对CSS进行了扩充以及修改。
与CSS相比扩展特性有：尺寸单位、样式导入。
- 尺寸单位
WXSS拥有针对屏幕的两种尺寸单位：rpx、rem。
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽度为750rpx。
如果在iphone6上，屏幕宽度为375偶像，共有750个物理像素，则750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。
| 设备 | rpx换算px（屏幕宽度/750） | px换算rpx（750/屏幕宽度） |
|---|---|---|
| iphone5 | 1rpx=0.42px | 1px=2.34rpx |
| iphone6 | 1rpx=0.5px | 1px=2rpx |
| iphone6s | 1rpx=0.552px | 1px=1.81rpx |
rem(root em):规定屏幕宽度为20rem;1rem=(750/20)rpx。因此建议，开发微信小程序时设计师可以用iphone6作为视觉稿的标准。在较小的屏幕上可以避免一些毛刺，开发中尽量避免这样情况。
2.样式导入
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用“：”表示语句结束，代码如下：
/**common.wxss**/
.small-p{
padding:5px;
}
/**app.wxss**/
@import "common.wxss";
.middle-p{
padding:15px;
}3 . 内联样式：
MINA组件上支持使用style、css属性来控制组件的样式。
style：静态的样式统一写到class中。style接收动态的样式，在运动时会进行解析，所以不要将静态的样式写进style中，以免影响渲染速度。代码如下
<view style="color:{{color}};" />class：用于指定样式规则，其属性值是样式规则中类选择器命（样式名）的集合，样式类名不需要带上“.”，样式类名之间用空格分隔。比如normal_view样式类的使用：
<view class="nomal_veiw" />4 . 全局样式与局部样式
定义在app.wxss中的样式为全局样式，作用于每一个页面。在page的wxss文件中定义的样式为局部样式，只作用于对应的页面，并会覆盖app.wxss中相同的选择器。
| 选择器 | 样例 | 样式描述 |
|---|---|---|
| .class | .intro | 选择所有拥有class=”intro”的组件 |
| id | firstname | 选择所有拥有id=”firstname”的组件 |
| element | view | 选择所有拥有view组件 |
| element,element | view checkbox | 选择所有文档的view组件和所有的 checkbox组件 |
| ::after | view::after | 在view组件后边插入内容 |
| ::befor | veiw::befor | 在view组件前边插入内容 |