小程序-模板与配置-WXSS模板样式
WXSS模板样式-WXSS与CSS的关系
- 什么是WXSS？
WXSS（wei xin style sheets）是一套样式语言，用于美化WXML的模板样式，类似于网页开发中的CSS。
- WXSS与CSS的关系
wxss具有css大部分特性，同时wxss对css进行了扩充以及修改，以适应微信小程序的开发。与css相比，wxss扩展的特性有：
rpx尺寸单位
@import样式导入
WXSS模板样式-rpx
- 什么是rpx尺寸单位？
rpx（response pixel）是微信小程序独有的，用来解决屏幕适配的尺寸单位。
- rpx的实现原理
rpx的实现原理非常简单：鉴于不同设备的屏幕大小不同，为了实现屏幕的自动适配，rpx吧所有设备的屏幕在宽度上等分为750份（即当前屏幕宽度为750rpx）。
在较小设备上1rpx所代表宽度较小，在大设备上1rpx所代表宽度较大。
小程序在不同设备上运行的时候，会自动把rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。
- rpx与px之间的单位换算
在iphone6上屏幕宽度为375px，共有750个物理像素，等分为750rpx。则：
750rpx=375px=750物理像素
1rpx=0.5px=1物理像素
官方建议：开发微信小程序时设计师可以用iphone6作为视觉稿的标准。
WXSS模板样式-样式导入
- 什么是样式导入？
使用WXSS提供的@import语法，可以导入外联的样式表。
- @import的语法格式
@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
WXSS模板样式-全局样式和局部样式
- 全局样式
定义在app.wxss中的样式为全局样式，作用于每一个页面。
- 局部样式
在页面的.wxss文件中定义的样式为局部样式，只作用于当前页面。
注意：
当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式