能解释一下物理像素、逻辑像素、像素密度的区别,并说明为什么在移动端开发中需要@2x、@3x等图片吗?

1.1 物理像素

物理像素也称为设备像素,是显示屏幕的最⼩物理单位,也就是说它是实际的物理存在的单位,是由设备的硬件决定。物理像素是显示器上的最小显示单元,物理像素的数量直接决定了屏幕的分辨率,比如一个屏幕分辨率为1920x1080,意味着它横向有1920个物理像素,纵向有1080个物理像素。

1.2 逻辑像素

但是我们知道现在的显示器也好,⼿机也好,它们的分辨率也就是物理像素差别⾮常⼤,我们开发者如果⾯向物理像素开发就需要先考虑每个设备的真实分别率,开发的难度就会⼤⼤提升。

所以操作系统和浏览器就抽象出另外的⼀种像素,我们称之为逻辑像素,也被称之为设备独⽴像素。

逻辑像素是⼀个抽象的单位,⽤于在编程中统⼀不同设备的显示标准。这样,⽆论设备的物理像素密度如何,使⽤逻辑像素单位开发的界⾯都能保持相对⼀致的⼤⼩和视觉效果。

1.4 为什么需要@2x、@3x图片

在移动端开发中,特别是为高分辨率屏幕设计应用或网站时,简单地放大低分辨率图片会导致图片模糊,因为每个物理像素需要显示的信息不足。为了保证在高像素密度屏幕上图像的清晰度,开发者需要提供不同分辨率的图片资源,这就是@2x、@3x图片的由来。