聊聊前端像素相关问题

前言：关于浏览器的物理像素，设备独立像素，物理像素比一直很模糊，在学习前端期间也查找了不少资料，但是每次看完后时间稍长一点就忘记了，所以到现在对这个东西一直是一知半解的，特此写一遍笔记来总结相关概念。

1、物理尺寸

• 显示器的实际尺寸，与现实中的尺寸一样

2、物理像素

• 一个物理像素是显示器屏幕上最小的物理显示单元；显示器物理尺寸跟显示器物理物理像素没有关系，同样物理尺寸的显示器，retina屏的物理像素一般大些。这里的大是指同样实际尺寸屏幕，retina屏的物理像素点要多。

3、设备独立像素

• 设备独立像素也叫设备密度无关像素，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。

4、设备像素比（dpr）

• 即物理像素与设备独立像素之间的关系

• //公式
  //设备像素比 = 物理像素 / 设备独立像素
  //浏览器获取设备像素比
  window.devicePixelRatio

   

5、原理

• 如下图，当我们在网页上设置一个元素的css像素（width:2px;height:2px）时，在dpr=1的显示器上时，最终会占用一个四个物理像素点，当在dpr=2时的显示器上时，会占用16个物理像素点。由此得出结论，在不同屏幕下css像素的物理尺寸是一致的，不同的是一个css像素对应的物理像素点个数不一样。

6、关于浏览器图片模糊（位图）矢量图不存在这个问题（如svg）

• 假设现在有一张100*100px的png图片，当图片显示在dpr=1的显示器上时，会占据100*100=10000个物理像素点，这是图像是清晰显示。如果我们将这个100*100px的图片放到dpr=2的屏幕上，此时图片的10000个css像素点会占据(100*2)*(100*2)=40000个物理像素点，一个位图像素对应四个物理像素，因为单位CSS像素不能再进行分割，所有只能就近取色，所以导致图片模糊。

7、图片模糊解决方案

• 加载高倍图，容器尺寸减小一般，比如，200*400的图片，设置img(width:100px;height:200px;)。
• 针对不同dpr的显示器加载不同尺寸的图片。