🏆今日学习目标:小程序支持的css选择器、小程序自适应单位rpx简介
😃创作者:颜颜yan_
✨个人主页:颜颜yan_的个人主页
⏰预计时间:20分钟
🎉专栏系列:我的第一个微信小程序
前言
哈喽大家好,本次是微信小程序专栏第五期啦,本期主要内容是小程序支持的css选择器和小程序自适应单位rpx简介。
注意:每期内容是连载呢,建议大家可以看看往期内容,更好理解噢~
小程序所支持的css选择器
注意:小程序只支持下表中的6种css选择器
选择器 | 样例 | 样例描述 |
.class | .sample | 选择所有拥有class="sample"的组件 |
#id | #sample | 选择所有拥有id="sample"的组件 |
element | view | 选择所有view组件 |
Element,element | view,checkbox | 选择所有文档的view组件和所有的checkbox组件 |
::after | view::after | 在view组件后边插入内容 |
::before | view::before | 在view组件前边插入内容 |
本地资源在wxss中是无法使用的。比如backgroung-image,如果使用的是本地图片,则无法显示,可以使用网络图片代替本地图片。
小程序自适应单位rpx
在小程序里,长度单位既可以使用rpx,也可以使用px,使用rpx可以使组件自适应屏幕的高度和宽度,但是使用px不会。
1物理像素=1rpx=0.5px
注意:rpx会随着屏幕尺寸的变化而变化,而px不会。选择rpx还是px取决于你需要元素随着移动设备尺寸的变化而变化,还是让元素始终保持不变。
比如:margin-top或者image组件的高宽,很多时候需要它们随着设备的尺寸不同动态地变化,以保持页面元素之间的分布可以保持一定的比例关系,这种情况下就应该使用rpx。
rpx通常非常适合用来控制图片的高度和元素之间的间距。
小程序的模拟器选项下,给出了每种机型的分辨率。这里的分辨率指的是逻辑分辨率pt,而非物理分辨率。
以iPhone 6为例,模拟器里给出的分辨率是:375×667;Dpr:2
它的意思是:iPhone 6的水平方向有375个逻辑像素点,而竖直方向有667个逻辑像素点,每个逻辑像素点包含2个物理像素点。开发的时候一定要注意逻辑像素和物理像素的区别。
总结
以上就是今天的学习内容啦~
如果有兴趣的话可以订阅专栏,持续更新呢~
咱们下期再见~