高清屏下的1px边框问题

基本概念

像素(css pixels)

css像素或逻辑像素，单位是px，它是一个相对单位，在不一样dpr(devicePixelRatio 设备像素比)设备中，1px表明的物理像素是不一样的。

物理像素(device pxels)

显示屏是由一个个物理像素点组成的，经过控制每一个像素点的颜色，使屏幕显示出不一样的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位pt。

css像素和物理像素的关系

dpr = 物理像素 / css像素

iPhone X的dpr和横向css像素

而iPhone X横向分辨率恰好是1125

1px问题

普通屏幕的1px就是物理像素的1px，而Retina屏的1px就不等于1px了，这就形成了在不一样设备中1px的实际宽度不一致的问题。

为了提升用户体验，须要兼容不一样dpr设备，使1px边框真正显示为1个物理像素的宽度（大多状况下咱们仍是但愿1px边框是尽量细）。

解决方法

0.5px

具体写法以下

缺点：
retina 屏的浏览器可能不认识0.5px的边框，将会把它解释成0px，没有边框。包括 iOS 7 和 以前版本，OS X Mavericks 及之前版本，还有 Android 设备。

伪元素 + transform

优势：浏览器兼容性很是好 👍

下面看一下在iPhone XS Max（dpr=3）上的实测效果

完美解决高清屏1px问题 👏

参考资料

https://objcer.com/2017/06/19...
https://github.com/jawil/blog...