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

在这里插入图片描述

?今日学习目标:小程序支持的css选择器、小程序自适应单位rpx简介
?创作者:颜颜yan_
✨个人主页:颜颜yan_的个人主页
⏰预计时间:20分钟
?专栏系列:我的第一个微信小程序



前言

哈喽大家好,本次是微信小程序专栏第五期啦,本期主要内容是小程序支持的css选择器和小程序自适应单位rpx简介。
注意:每期内容是连载呢,建议大家可以看看往期内容,更好理解噢~


小程序所支持的css选择器

注意:小程序只支持下表中的6种css选择器

选择器样例样例描述
.class.sample选择所有拥有class="sample"的组件
#id#sample选择所有拥有id="sample"的组件
elementview选择所有view组件
Element,elementview,checkbox选择所有文档的view组件和所有的checkbox组件
::afterview::after在view组件后边插入内容
::beforeview::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个物理像素点。开发的时候一定要注意逻辑像素和物理像素的区别。


总结

以上就是今天的学习内容啦~
如果有兴趣的话可以订阅专栏,持续更新呢~
咱们下期再见~
在这里插入图片描述


版权声明:本文为m0_55394328原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。