1px在不同设备的一个探究

其实我们要搞明白两个问题：

1. 为什么有时候边框无法在部分手机显示？
2. 我们真的要小于1px吗

为什么有时候边框无法在部分手机显示？

有两种设置方式：

1. 0.5px
2. 0.22rem

首先0.5px在老手机是不支持的，特别是安卓，0.5px（小于1px）会被视为1px渲染。

0.22rem或者0.22em他们都是相对父级或者根元素进行换算的，最终他们也得变成px单位渲染，有可能是大于1px，有可能会小于1px，最终也会出现部分手机边框是粗的，原因也是因为不足1px被当1px渲染了。

还有一个原因，但是需要先了解一些屏幕像素的知识了！

我们可以将屏幕的像素视为一个个小方格，一排可能就n个这种大小的方格，每个方格有自己的灯光控制显色，也就是说一个方块就是最低的物理控制单位，被称为1px。

在1:1的屏幕下，css中1px对应物理上的1个方格， 当我们1.5px时，0.5px无法在物理上实现，所以大部分做法就是这0.5px不做显示。但是部分高分屏中，0.5px可能对应的是1个方格，那么他的0.5就能被显示，如果屏幕的像素点够多，他就能支持更多的小数级px。

反之，如果屏幕物理像素不够多，但是又是高分屏时，它卡在了某个中间点上，0.5或者其他无法对应到1个物理方格，那么这个像素就无法被正确显示。

所以，如果能1px显示，我的建议就是1px显示，浏览器已经做了充足的转换，没必要再自己转了。

我们真的要小于1px吗

为什么会有小于1px的情况，当然得设计背锅，设计师在设计ui样式时，往往使用的分辨率都是大于设备显示的分辨率的，常用的就是750px的宽度，但是手机可能大部分在375px左右。

这就导致我们需要把750px像素的设计稿等比缩放在手机上，但是这就导致在750px上的1px边框，在手机上就得变细，否则就会显示边框很粗（视觉差）。

这就产生了一个前端最蛋疼的问题，如何实现0.5px的细边框。

显然从物理的角度看，不存在0.5px的大小，只能从软件层处理。

另一方面的原因手机端1px的边框很粗，这个是因为手机显示像素很高，如果1:1显示，网页就会显示的很小，为了能更好的阅读，css的像素会和物理的像素做一个倍率转换，有的设备css的1px等于物理2px，有的css的1px等于物理3px。虽然最终看上去每个设备上1px宽度都是一致的。

所谓，成也萧何，败也萧何，因为高分屏，边框是可以想办法做的更细。

其实他们最终想要的就是：如何在高分屏渲染一个真实1px物理像素的边框。（让边框看起来细一点）

做法可以参考这个文章：《移动端1px解决方案》