微信小程序（布局适配与物理逻辑像素）

最新推荐文章于 2024-02-29 10:03:10 发布

模特

最新推荐文章于 2024-02-29 10:03:10 发布

阅读量2.5k

点赞数

本文链接：https://blog.csdn.net/woshierdanya/article/details/99680960

版权

本文介绍了移动端开发中物理像素、逻辑像素、像素密度和像素比等概念，重点讨论了微信小程序中的适配策略，如rpx、vw、vh单位的使用，以及如何在Retina屏幕上实现1像素边框。文章强调，工程师的尺寸基于逻辑像素，而设计师的尺寸基于物理像素。

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

移动端开发经常遇到一些概念：物理像素、逻辑像素、像素密度、像素比等
关键词：屏幕尺寸、物理像素/屏幕分辨率/物理分辨率、逻辑像素DIP、像素密度PPI、像素比DPR、视网膜显示屏Retina、rpx、vw、vh等。
在这里插入图片描述
单位是英寸，1英寸=2.54厘米
比如常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等
逻辑像素/设备独立像素DIP—WEB
逻辑像素/设备独立像素
也叫“设备独立像素”（Device Independent Pixel, DIP），可以理解为反映在CSS/JS代码里的像素点数。
这个是计算机坐标系统里的虚拟慨念，这个点代表一个可以由程序使用的虚拟像素(比如: css像素-----逻辑像素)
视网膜显示屏Retina
Retina：
在这里插入图片描述
viewport:
viewport（谷歌翻译为：视）中的一个小方格，CSS样式代码中使用的是逻辑像素。如果在一个设备中，物理像素与逻辑像素相等，将不会产生任何问题。但是，在iphone 4中，物理像素是640px960px，而逻辑像素数为320480px。因此，需要使用大约4个