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

原创

颜颜yan_ 2024-11-24 22:29:11 博主文章分类：微信小程序开发实战 ©著作权

文章标签 像素点 css选择器本地图片 文章分类 微信开发移动开发 私藏项目实操分享

©著作权归作者所有：来自51CTO博客作者颜颜yan_的原创作品，请联系作者获取转载授权，否则将追究法律责任

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

🏆今日学习目标：小程序支持的css选择器、小程序自适应单位rpx简介
😃创作者：颜颜yan_
🎉专栏系列：微信小程序开发实战

小程序所支持的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个物理像素点。开发的时候一定要注意逻辑像素和物理像素的区别。