深挖一像素问题

[Luin-Li]

1. 基本概念

• 设备像素（或物理像素）（DP） 是显示屏中最小的物理单元。显示器上的物理像素等于显示器的点距，单位pt。

  我们通常所说的显示器分辨率，其实是指桌面设定的分辨率，而不是显示器的物理分辨率。只不过现在液晶显示器成为主流，液晶显示器只有在桌面分辨率与物理分辨率一致的情况下，显示效果最佳，所以现在我们的桌面分辨率几乎总是与显示器的物理分辨率一致了。

  注意：这里对于1dp有多大是没有一定的大小的，它只是代表显示屏中最小的物理单元。例如,小米电视机的1dp与 iphone7 Plus的1dp当然不一样大。（两者物理分辨率一样）

• ppi（或dpi）：每英寸多少物理像素数， 放到显示器上说的是每英寸多少物理像素及显示器设备的点距。如下为iphone6的ppi:

**ppi越高，每英寸像素点越多，图像越清晰**

• CSS像素 是图像显示的基本单元，既 不是一个确定的物理量， 也不是一个点或者小方块，而是一个抽象概念。它是浏览器使用的抽象单元， CSS像素的单位就是我们常用的px。

  px 是一个 相对单位，相对的是设备像素(device pixel),它的相对性表现在两方面：

  • 在同一设备上，每1个CSS像素所代表的物理像素是可以变化的。默认情况下一个CSS像素应该是等于一个物理像素的宽度的，但是如浏览器的放大操作可以让一个CSS像素等于两个设备像素宽度。

  • 在不同的设备之间，每1个CSS像素所代表的物理像素是可以变化的。

  由于不同的物理设备的物理像素的大小是不一样的，所以css认为浏览器应该对css中的像素进行调节，使得浏览器中 1css像素的大小在不同物理设备上看上去大小总是差不多。

  CSS像素的真正含义：CSS像素是一个 视角单位，css规范中，CSS像素使用 参考像素来进行换算。1 参考像素即为从一臂之遥看解析度为96DPI的设备输出（即1英寸96点）时，1点（即1/96英寸）的视角。眼睛看到的大小，取决于可视角度。而可视角度取决于物体的实际大小以及物体与眼睛的距离。10米远处一个1米见方的东西，与1米远处的10厘米见方的东西，看上去的大小差不多是一样的。 理解为CSS规范定义的 参考像素并不是1/96英寸，而 是1/96英寸在一臂之遥的看起来的视角。

2. 关系

• 设备独立像素，也称为逻辑像素（DIP）。CSS像素 = 设备独立像素

• 在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px是一个相对单位,pt在css单位中属于绝对单位

pt = px * dpi / 72, 常见的dpi为96,则1pt = 4/3px

• 设备像素比（dpr）,DPR = 设备像素/CSS像素 = 物理像素 / 独立像素 当这个比率为1:1时，使用1个设备像素显示1个CSS像素。当这个比率为4:1时，使用4个设备像素 显示1个CSS像素。

• 设备像素比(dpr) 是指在移动开发中1个css像素占用多少设备像素。一般由设计师按照设备像素(device pixel)为单位制作设计稿。前端工程师，参照相关的设备像素比(device pixel ratio)，进行换算以及编码。公式为1px = (dpr)^2 * 1dp

  如何计算dpr?先计算出ppi，dpr = ppi/160

• Retina显示屏 是一种显示技术，可以将把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。在桌面显示器中，我们调整了显示分辨率，比如从 800 * 600 调整到 1024 * 768 时，屏幕的文字图标会变小，显示的内容更多了。但 Retina 显示方式不会产生这样的问题，或者说， Retina 显示技术解决的是显示画面精细程度的问题，而不是解决显示内容容量的问题。

• 一粒像素有多大？虽然说像素是构成屏幕的发光的点，是物理的，但是 像素在脱离了屏幕尺寸之后是没有大小可言的，你可以将 1920 * 1080 颗像素放到一台 40 寸的小米电视机里面，也可以将同样多的像素全部塞到一台 5.5 寸的 iPhone7 Plus 手机里面去，那么对于 40 寸的电视而言，每个像素颗粒当然会大于 5.5 寸的手机的像素。

• 关于Viewport：（1）浏览器默认情况下把viewport设为一个比移动设备屏幕尺寸更宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了，这个浏览器默认的viewport叫做 layout viewport；（2）浏览器可视区域的大小的这个viewport叫做 visual viewport；（3）ideal viewport是最适合移动设备的viewport，它并没有一个固定的尺寸，不同的设备拥有有不同的ideal viewport。

• 代码设置ideal viewport：在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中：
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

• 一像素问题： UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在某些机型上，1px会比较粗，即是较经典的移动端1px像素问题。这是因为devicePixelRatio 值为 1 的屏幕称之为标准屏，这时不会出现“一像素问题”，但是目前，大部分移动设备都是高清屏，即 devicePixelRatio 值大于 1 的屏幕,此时节点的设备像素为 所设置的CSS像素的大于1倍，所以会出现“一像素问题”

如何解决?

• 伪元素 + transform 实现
• svg 实现
• 新项目可以尝试使用 viewport 方案

参考资料

参考资料