微信小程序——wxss模板样式
wxss 和 css的关系
wxss具有css大部份的特性,同时,wxss还对css进行了扩充以及修改,以适应微信小程序的开发。
与css相比。wxss扩展的特性有:
一、 - rpx尺寸单位
二.、- @import样式导入
wxss是专门用来美化微信小程序的专用美化工具
一、wxss——rpx
- 什么是rpx
rpx(responsive pixel)是微信小程序独有的,用来解决屏适配的尺寸单位。微信小程序直接使用。 - rpx的实现原理
鉴于不同的设备屏幕大小也不同,为了实现屏幕的自动适配,rpx把所有设备的屏幕,在宽度上等分为750份,也就是当前屏幕的总宽度大小为750rpx。
- 在较小的设备上,1rpx所代表的的宽度较小
- 在较大的设备上,1rpx所代表的的宽度较大
小程序在不同设备上运行的时候,会自动把rpx的样式单位换算成对应的像素单位来渲染,从而实现屏幕的适配。
- 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中的样式
并且局部样式会优先于全局样式
- 当局部样式和全局样式发生冲突时,根据就近原则,局部样式会覆盖全局样式
- 当局部样式的权重大于或等于全局样式的权重时,才会覆盖全局的样式
此文章仅为本人记录学习过程笔记,内容可能存在错误,请自行甄别。
若有发现不妥之处亦可讨论修正,共同学习。