基本概念
像素(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...