小程序-模板与配置-WXSS模板样式

WXSS模板样式-WXSS与CSS的关系

1. • 什么是WXSS？

WXSS（wei xin style sheets）是一套样式语言，用于美化WXML的模板样式，类似于网页开发中的CSS。

2. • WXSS与CSS的关系

wxss具有css大部分特性，同时wxss对css进行了扩充以及修改，以适应微信小程序的开发。与css相比，wxss扩展的特性有：

• rpx尺寸单位

• @import样式导入

WXSS模板样式-rpx

1. • 什么是rpx尺寸单位？

rpx（response pixel）是微信小程序独有的，用来解决屏幕适配的尺寸单位。

2. • rpx的实现原理

rpx的实现原理非常简单：鉴于不同设备的屏幕大小不同，为了实现屏幕的自动适配，rpx吧所有设备的屏幕在宽度上等分为750份（即当前屏幕宽度为750rpx）。

在较小设备上1rpx所代表宽度较小，在大设备上1rpx所代表宽度较大。

小程序在不同设备上运行的时候，会自动把rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。

3. • rpx与px之间的单位换算

在iphone6上屏幕宽度为375px，共有750个物理像素，等分为750rpx。则：

750rpx=375px=750物理像素

1rpx=0.5px=1物理像素

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

WXSS模板样式-样式导入

1. • 什么是样式导入？

使用WXSS提供的@import语法，可以导入外联的样式表。

2. • @import的语法格式

@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

WXSS模板样式-全局样式和局部样式

1. • 全局样式

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

2. • 局部样式

在页面的.wxss文件中定义的样式为局部样式，只作用于当前页面。

注意：

1. 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式

2. 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式