微信小程序--7（WXSS模板样式）

目录

一、概念

二、扩展特性        

（一）rpx尺寸单位

（二）@import样式导入

三、全局样式与局部样式

（一）全局样式

（二）局部样式

一、概念

        WXSS是一套样式语言，用来美化WXML的组件样式，类似网页开发中的CSS。

二、扩展特性        

        与CSS相比，它具有CSS的大部分特性，与此同时，WXSS还对CSS进行了扩充以及修改，以适应微信小程序的开发。

（一）rpx尺寸单位

1. 是小程序独有的，用来解决屏适配的单位；
2.  rpx的实现原理：rpx把所有设备在宽度上等分为750份（当前屏幕的总宽度为750rpx）；
3. 在较小设备上，1rpx所代表的宽度较小，这也说明1rpx的大小是不断随着设备的大小变化的，是更加灵活的。
4. 1rpx=0.5px=1物理像素（在iPhone6上） 1px = 2rpx（建议以这个为标准，因为换算简单）
5. 1rpx=0.42px(iPhone5)   1px = 2.34rpx
6. 1rpx=0.552px(iPhone6 plus）  1px = 1.81rpx

（二）@import样式导入

1. 使用WXSS提供的@import语法，可以导入外联的样式表。
2. 语法格式：@import  ”相对路径“。

        示例：

三、全局样式与局部样式

（一）全局样式

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

        示例：

（二）局部样式

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

        示例：

        注意：

1. 当局部样式和全局样式冲突时，根据就近原则，局部会覆盖全局
2. 
3. 
4. 当局样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式
5. 
6.