首页常见问题正文

移动Web开发基础：设备像素比是什么?

更新时间:2022年07月25日16时22分来源:传智教育浏览次数:

好口碑IT培训

　　在传统的PC端和早期的普通手机中，屏幕上的一个像素和网页CSS中的一个像素是完全对应的。但随着技术的进步，为了提高屏幕显示的细腻度，高分辨率的屏幕开始流行，一块屏幕可以显示更多的像素。但随之产生了一个问题，就是同一个网页在不同分辨率的屏幕下显示效果会有大小差异，因为CSS中使用的像素是一个固定值，它不会因为屏幕分辨率而发生改变。例如，在屏幕尺寸相同的情况下，一个12px的文字在低分辨率的屏幕中尺寸很大，但在高分辨率的屏幕中，文字会显得特别小，不利于浏览。

　　为了解决这个问题，高分辨率设备的操作系统会对网页画面进行缩放，让网页内容大小看上去比较舒适，而网页中使用的像素并不做修改。尤其是网页中的文字，在高分辨率屏幕下的显示效果会更加细腻。因此，在高分辨率屏幕中，CSS使用的像素单位和屏幕显示的像素并不是一对一的，将屏幕像素除以CSS像素得到的就是设备像素比。

　　例如，当设备像素比为4时，CSS像素和屏幕像素的转换关系如图2-14所示。

CSS像素和屏幕像素的转换关系