CSS像素以及移动端不同屏幕适配问题解决

像素与分辨率的奥秘

我们日常所说的显示器分辨率，其实更多指的是桌面设定的分辨率，而非显示器的物理分辨率。随着液晶显示器的普及，其显示原理与CRT显示器有所不同，因此在桌面分辨率与物理分辨率相匹配时，显示效果达到最佳。现代显示器的桌面分辨率往往与物理分辨率保持一致。

在UI设计中，像素的概念更为具体。UI稿中的像素指的是物理像素。例如，我们接到的UI设计稿中的750px，就是物理像素的尺寸。

而在前端开发中，两个屏幕的逻辑像素相同，那么它们的显示效果就会一致。这可以理解为在CSS世界中的px是一致的。相同物理尺寸的屏幕，其显示效果也会相同。

那么在实际屏幕显示时，这些像素之间的关系是如何的呢？以网页上的一个元素为例，当其css像素设置为（width:2px;height:2px）时，在普通显示器上，它会占用一个四个物理像素点。但在高分辨率的显示器上，如dpr=2的显示器，它会占用16个物理像素点。这说明在不同屏幕下，css像素的物理尺寸是一致的，但一个css像素对应的物理像素点数量会有所不同。

关于不同屏幕下的rem适配方案，有一种常见的适配方式是：将物理像素宽设定为750，1rem等于100px。具体的适配过程是通过js计算实现的。当实际逻辑像素宽度为375时，我们将此作为参照基准，计算出实际的1rem像素值。这样，我们就可以根据实际的逻辑像素宽度来适配不同屏幕下的rem值。

为什么苹果手机上需要2倍图或3倍图呢？这是因为苹果手机的屏幕有着较高的分辨率和密度。以2倍屏为例，原本22像素的图片在2倍屏下会显示为44个像素点。为了保持图片的清晰度，我们需要提供更高分辨率的图片，即苹果两倍图。

了解像素、分辨率以及它们之间的关系，对于UI设计和前端开发都至关重要。只有深入理解这些概念，才能在不同屏幕下提供一致且优质的用户体验。希望的内容能对大家的学习有所帮助，也希望大家能支持狼蚁SEO，共同更多的数字世界奥秘。