微信小程序（适配小结、移动端1px与选择器权重）

最新推荐文章于 2024-01-05 00:11:34 发布

weixin_45343878

最新推荐文章于 2024-01-05 00:11:34 发布

阅读量557

点赞数 1

文章标签：微信小程序（适配小结、移动端1px与选择器权重）

本文链接：https://blog.csdn.net/weixin_45343878/article/details/99683803

版权

本文详细介绍了微信小程序中的适配问题，重点关注了移动端1px像素问题的由来、解决方案，包括媒体查询、border-image、box-shadow、transform: scale()等方法，并分析了各种方案的优缺点。

摘要由CSDN通过智能技术生成

WXSS选择器权重与优先级
WXSS优先级与CSS类似，权重如下图所示
在这里插入图片描述
权重越高越优先。在优先级相同的情况下，后设置的样式优先级高于先设置的样式

权重案例
在这里插入图片描述
适配小结
上节介绍的物理像素与逻辑像素相关概念，
关键词：

物理像素dp
（1）物理像素(physical pixel)
物理像素又被称为设备像素（device pixel简称dp）他是显示设备中一个最微小的物理部件。
一个设备的物理像素是固定不变的。每个像素可以根据操作系统设置自己的颜色和亮度。所谓的一倍屏、二倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显示一个CSS像素.
也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点，在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素。
在这里插入图片描述
设备独立像素DIP
（2）设备独立像素
CSS像素/逻辑像素/设备独立像素/设备无关像素（Device Independent Pixels）
设备独立像素(又称设备无关像素 Device Independent Pixels），可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css像素),然后由相关系统转换为物理像素。