【微信小程序】小程序支持的css选择器、小程序自适应单位rpx简介

🏆今日学习目标：小程序支持的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个物理像素点。开发的时候一定要注意逻辑像素和物理像素的区别。

---

总结

以上就是今天的学习内容啦~
如果有兴趣的话可以订阅专栏，持续更新呢~
咱们下期再见~