前端 | 一倍图、二倍图、三倍图、多倍图

物理像素(pt):也叫设备像素,就是显示屏的分辨率中的一个单位。不同机型有不同的分辨率,比如:iPhone12mini 2340x1080。

CSS像素(px):就是开发中的像素px,与物理像素无关。

CSS像素与物理像素比:

PC端:1px 等于 1pt 。

移动端:1px 不一定等于 1pt。物理像素可能是CSS像素的一倍、二倍、三倍、甚至多倍,根据设备的不同像比例也不同。

一倍图:1px 等于 1pt,也就是1个物理像素显示1个CSS像素。

二倍图:1px 等于 2px,也就是2个物理像素显示1个CSS像素。

三倍图:1px 等于 3px,也就是3个物理像素显示1个CSS像素。

Retina视网膜屏幕是一种显示技术,可以把更多的物理像素点压缩至一块屏幕里,从而达到更高的分辨率,并提高屏幕显示的细腻程度。比如在2 x 2px的物理像素下Retina视网膜屏幕显示的是4 x 4px。