微信小程序模板与配置（二）wxss样式美化页面结构

1、wxss模板样式-基础介绍

（1）什么是wxss？

WXSS（WeiXin Style Sheets）是一套样式语言，用于美化WXML的组件样式。

WXSS和CSS的关系

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

与CSS相比，WXSS扩展的特性有：

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

（2）rpx单位

什么是rpx尺寸单位？

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

rpx的实现原理

鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份（即：当前屏幕的总宽度为750rpx）

在较小的设备上，1rpx代表的宽度较小；

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

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

（3）rpx与px之间的单位换算（了解）

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

2、wxss模板样式-样式导入

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

@import的语法格式

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

新建一个文件夹，新建common.wxss文件

/**公共的样式表*/

.username{

  color: red;

}

test2.wxss文件中导入样式：

@import "/pages/common/common.wxss";

test2.wxml文件中引入：

<view wx:for="{{List}}" wx:key="index" class="username">{{item.name}}</view>

测试效果：

3、wxss模版样式-全局样式和局部样式

（1）全局样式

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

以iPhone6为例，给页面上的view添加样式，1px=2rpx

/**app.wxss**/

view{

  padding: 10rpx;

  margin: 10rpx;

  background-color: lightblue;

}

测试效果：

（2）局部样式

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

在test2.wxss中定义view样式：

view{

  color: purple;

}

测试效果：

注意：

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

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