🏆今日学习目标：小程序支持的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个物理像素点。开发的时候一定要注意逻辑像素和物理像素的区别。
总结
以上就是今天的学习内容啦~
如果有兴趣的话可以订阅专栏，持续更新呢~
咱们下期再见~
