wxss模板样式

wxss(WeiXin Style Sheets)是一套样式语言，用于美化wxml组件样式，类似css，与css相比，扩展特性有：

• rpx尺寸单位
• @import样式导入

rpx

rpx(responsive pixel) 是微信小程序独有，用来解决屏幕适配的尺寸单位

实现原理

根据不同的屏幕大小，rpx把所有设备屏幕，在宽度上等分750份(即：当前屏幕的总宽度喂750rpx)

• 较小设备上，1rpx代表的宽度较小
• 较大设备上，1rpx代表的宽度较大

rpx和px单位换算

在iPhone6上，宽度375px，共有750个物理像素，等分750rpx

• 750rpx=375px=750物理像素
• 1rpx=0.5px=1物理像素

所以1px=2rpx

样式导入

wxss提供 @import 语法，可以导入外联的样式表

@import语法格式:

@import 后需要引入样式表的相对路径,以**;** 结束：

/* index.css */
@import './list.css';

全局样式和局部样式

定义在app.wxss中的样式为全局样式，作用每个页面 页面中xxx.wxss为xxx页面局部样式，只作用于xxx页面

• 当局部样式和全局样式冲突，取局部样式（就近原则）
• 当局部样式权重大于等于全局样式权重，也会覆盖全局样式