🍒观众老爷们好呀,小程序系列更新,上文我们讲解了小程序中WXML 中的条件渲染和列表渲染,那么接下来,就让我们走进微信小程序的WXSS以及小程序配置吧!
🍒今天的内容也是非常重要,赶紧拿小本本记起来呀。
一,WXSS
首先我们先介绍一下wxss
,wxss
是微信小程序独有的模板样式,它类似于web开发中的CSS
,具备CSS
大部分的功能,同时,它还拓展出了几个内容功能,接下来牛牛介绍一下新增的rpx尺寸单位
以及样式导入@import
。
1.1 rpx尺寸单位
rpx
尺寸单位是微信独有的,主要用来解决屏适配问题。怎么回事呢?我们知道,手机款式很多,手机屏幕的大小也并不一致,我们想要让小程序根据屏幕宽度自动完成屏适配,于是有了rpx
,rpx
将屏幕宽度等分为750份,我们在开发的时候使用rpx
尺寸单位,到使用的时候就会将其换算成像素单位,实现屏适配。
tip:
微信建议开发者, 开发微信小程序时设计师可以用 iPhone6
作为视觉稿的标准。
1.2 样式导入@import
在CSS
中,我们用<link>
标签导入外联样式表,在微信小程序中,单个页面的wxss
文件渲染页面并不用我们操心,不过有时候我们需要格外导入外联样式,而在WXSS
中,我们使用@import
实现。
语法:@import "相对路径"
1.3 全局样式
微信小程序的全局样式是写在根目录的app.wxss
文件中的,全局样式就意味着里面的样式将在每一个页面均生效。
需要注意的是,当全局样式与页面的局部样式发生冲突时,但局部选择器权