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

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

wxss 和 css的关系

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

一、wxss——rpx

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

3. rpx与px之间的单位换算*（了解）
   在苹果6上，屏幕宽度为375px，共有750个物理像素，等分为750rpx。则：750rpx=375px=750物理像素
   1rpx=0.5px=1物理像素
   对比换算公式样例：
   

二、wxss——@import样式导入

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

@import “common.wxss”

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

样例展示：

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

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

演示：
初始页面：

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

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