高清屏下的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...