互联网1像素粗细之谜，物理像素，设备像素，独立像素之间的区别

互联网上有一道线，谁也不知道它究竟有多宽。

相信做移动端开发的同学，大部分都遇到过1px问题。明明在PC端浏览器上设置的1px边框，在移动端浏览器上看上去会“更粗”一些。有的同学可能会说，那不就是2px了吗？2px也是1px的两倍，没错，但这是不对的。我们可以换个角度想一下，如果我们用一个放大镜去观察，1px就是1px，它并不会因为屏幕放大就变成2px。

那么，为什么会有这种问题呢？我们需要先了解几个概念：

物理像素

物理像素是指屏幕上实际存在的像素点。它的单位是ppi(pixels per inch)，即每英寸有多少个像素点。ppi越高，屏幕的分辨率就越高，显示的图像就越清晰。

设备像素

设备像素是指设备上渲染像素的单位。它的单位是dp(device pixels)，即设备上每英寸有多少个像素点。dp与ppi之间的关系是：dp = ppi / 160。也就是说，1dp等于160ppi。

独立像素

独立像素是指不受设备的分辨率影响的像素单位。它的单位是px(pixels)，即像素。px与dp之间的关系是：px = dp * 设备的分辨率 / 160。也就是说，1px等于设备的分辨率 / 160个dp。

知道了这三个概念，我们就可以理解为什么移动端1px问题会出现了。

在PC端浏览器上，1px就是1px，它不受设备的分辨率影响。但是在移动端浏览器上，1px的大小会根据设备的分辨率而变化。也就是说，在高分辨率的设备上，1px会显得更粗，而在低分辨率的设备上，1px会显得更细。

那么，如何在移动端布局中解决1px问题呢？有以下几种方法：

• 使用物理像素。物理像素不受设备的分辨率影响，因此可以使用物理像素来确保元素的边框始终为1px。但是，使用物理像素会使得布局在不同分辨率的设备上显示效果不一致。
• 使用设备像素。设备像素会根据设备的分辨率而变化，因此可以使用设备像素来确保元素的边框在不同分辨率的设备上显示效果一致。但是，使用设备像素会使得布局在高分辨率的设备上显得过于粗糙。
• 使用独立像素。独立像素不受设备的分辨率影响，也不会使得布局在高分辨率的设备上显得过于粗糙。因此，使用独立像素是解决移动端1px问题的最佳方法。

在实际开发中，我们可以使用rem单位来实现独立像素。rem单位相对于根元素的font-size。也就是说，1rem等于根元素的font-size。我们可以将根元素的font-size设置为16px，这样1rem就等于16px。然后，我们可以使用rem单位来定义元素的边框和其他属性。这样，无论设备的分辨率如何，元素的边框始终都会为1px。

以上就是移动端1px问题的解决方案。希望对大家有所帮助。