如今主流手机屏幕的像素点数已经远远超过了桌面显示器的像素数量，5.5英寸1920x1080P的手机与一个21英寸1920x1080P的显示器相比，同等面积下，手机的像素点更密集，可想而知，在手机屏幕上一个像素点是非常小的。

那么在CSS中设置font-size:12px，如果“手机屏幕物理像素：CSS像素”=“1：1”，那么手机上展示出来的字体你可能需要放大镜才能看清，但为什么如今的手机屏幕依然能清晰的显示？

答案就是：CSS中的px与屏幕上的物理像素px不是等同的。

逻辑分辨率与物理分辨率

由于以上物理像素尺寸差异导致的问题，我们不可能把电子文件中的像素与物理像素做1：1的适配。必须在小的设备上适当放大，也就是说用多个物理像素来显示一个电子像素，从而保证阅读质量。
所以devicePixelRatio应运而生：逻辑分辨率=物理分辨率/devicePixelRatio

普通密度桌面显示屏的devicePixelRatio=1
高密度桌面显示屏(Mac Retina)的devicePixelRatio=2
主流手机显示屏的devicePixelRatio=2或3

因为大部分桌面显示器的devicePixelRatio为1，所以在PC端我们感受不出来CSS Pixel 与 物理像素的差别。

举个栗子来说，一张100x100的图片，通过CSS设置它width:100px;height:100px。在电脑上打开，没有什么问题，但是在手机上打开，屏幕按照逻辑分辨率来渲染，假设手机的devicePixelRatio=3，那么就相当于拿3个物理像素来描绘1个电子像素。这等于拿一个三倍的放大镜去看你的图片，你的图片可能因此变得模糊，因为细节不够。所以一般明智的做法是把图片换成300x300的，CSS宽高不变，这样在手机上展示时，CSS宽高换算成物理像素是300x300，你的图片也是300x300，就不会变糊了。

扩展链接（移动端设计尺寸基础知识）：点击打开链接

扩展链接（逻辑分辨率和物理分辨率）：点击打开链接