微信小程序——wxss模板样式

微信小程序——wxss模板样式

wxss 和 css的关系

wxss具有css大部份的特性，同时，wxss还对css进行了扩充以及修改，以适应微信小程序的开发。
与css相比。wxss扩展的特性有：
一、 - rpx尺寸单位
二.、- @import样式导入

wxss是专门用来美化微信小程序的专用美化工具

一、wxss——rpx

1. 什么是rpx
   rpx（responsive pixel）是微信小程序独有的，用来解决屏适配的尺寸单位。微信小程序直接使用。
2. rpx的实现原理
   鉴于不同的设备屏幕大小也不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份，也就是当前屏幕的总宽度大小为750rpx。

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

3. rpx与px之间的单位换算*（了解）
   在苹果6上，屏幕宽度为375px，共有750个物理像素，等分为750rpx。则：750rpx=375px=750物理像素
   1rpx=0.5px=1物理像素
   对比换算公式样例：
   
   官方建议：开发微信小程序时，设计师可以用苹果6作为视觉稿的标准。
   开发举例：在苹果6上如果要绘制宽100px，高20px的盒子，换算成rpx单位，宽高分别为：200rpx，40rpx。

二、wxss——@import样式导入

1、@import的语法格式
@import后根据需要导入外联样式表的相对路径，用“ ；”表示语句结束。
类似于css的文件，当我们已经写好了一个css文件格式，那么我们就会在html文件中进行对css文件导入去格式化我的html文件
使用示例：

@import “common.wxss”

使用示例：
在文件中创建一个common文件夹装在我们的wxss文件，随后创建一个wxss文件，并在wxss中写上我们想要的样式格式语句。

之后在我们需要引用页面的wxss文件中根据格式进行路径引用格式文件

最后在相对应的wxml文件，想要格式化的语句中加入标签进行样式格式化即可

此类方法即是通过路径引入来格式化我们想要的wxss美化，减少代码的臃肿。

样例展示：

三、wxss——全局样式和局部样式（进阶）

1、全局样式
定位app.wxss中的样式为全局样式，作用于每一个页面。
应用之后可以局部调整，全局默认为设置好的样式。在wxss结构文件中进行设置。

演示：
初始页面：

加入了全局样式之后的演示，并可辐射到其他页面

2、局部样式
只美化控制当前的页面
比如list.wxss的只会控制list中的样式
并且局部样式会优先于全局样式

• 当局部样式和全局样式发生冲突时，根据就近原则，局部样式会覆盖全局样式
• 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式
  

此文章仅为本人记录学习过程笔记，内容可能存在错误，请自行甄别。
若有发现不妥之处亦可讨论修正，共同学习。