前端 CSS 面试题, 什么是物理像素,逻辑像素和像素密度?为什么在移动端开发时需要用到 @3x, @2x 这种图片?

Step 1

Q:: 什么是物理像素？

A:: 物理像素（Physical Pixel）是显示屏幕上最小的显示单元，它由红、绿、蓝（RGB）三个子像素组成。物理像素的数量是屏幕的硬件属性，不会因为软件设置的调整而改变。

Step 2

Q:: 什么是逻辑像素？

A:: 逻辑像素（Logical Pixel）是指设备独立像素（Device-Independent Pixel，简称 DIP），在不同的设备上，逻辑像素的大小可能不同。浏览器和操作系统会根据设备的像素密度将逻辑像素映射到物理像素。例如，在高分辨率设备上，可能一个逻辑像素会对应多个物理像素。

Step 3

Q:: 什么是像素密度？

A:: 像素密度（Pixel Density）指的是每英寸的物理像素数量，也称为 PPI（Pixels Per Inch）。像素密度越高，屏幕显示的图像就越清晰。不同设备的像素密度不同，这也是为什么在移动设备上要特别注意显示效果。

Step 4

Q:: 为什么在移动端开发时需要用到 @3x, @2x 这种图片？

A:: @2x 和 @3x 图片是为了适应不同像素密度的设备。移动设备的像素密度通常比桌面设备高很多，为了保证图像在高像素密度的屏幕上清晰呈现，需要提供更高分辨率的图片。@1x, @2x, @3x 分别对应标准像素密度、两倍像素密度和三倍像素密度的屏幕。当设备加载图片时，会根据屏幕的像素密度选择合适的版本。