## 給你看看0.5px長什么樣？ 做移動端適配時經常聽到1px邊框的問題，這是個什么梗？為什么是1px？為什么是邊框？下面我們就一起解開它的面目。 設計師要的1px是一個物理像素，也就是所能設計出來的最細的線，而css中的1px是一個點，dpr為2的話，那么就是兩個物理像素了，這就不是設計師要的細線了。 通常邊框我們并不需要它隨著屏幕越大而越粗，也就是不需要它自適應，所以不能用rem，只能用px，雖然蘋果支持0.5px，但是有的安卓機不支持，0.5px可能就直接顯示不出來而被忽略掉，所以還是寫1px，那用什么辦法，讓設計師看到它想要的細線呢？（安卓機是看不出來的） 視口縮放`scale=0.5`就能滿足要求，這樣可以不用改動任何代碼。視口縮放是最簡單的方式（**已經[證明](http://www.hmoore.net/xiak/quanduan/698257)過了視口縮放不會影響rem元素大小**）。 還有一種方式就是檢測到支持細線的，給html元素加一個類名`hairlines`，然后在css里面適配寫0.5px的邊框，這也是淘寶最新的方案[flexible.js](https://github.com/amfe/lib-flexible)，不過這種方式需要增加很多邊框適配的css，所有細線效果都要重寫為0.5px，有點麻煩，我更傾向于第一種。雖然有點簡單粗暴，但更省事。  （錘子堅果3：分辨率 1080x2160，dpr 3，設備獨立像素 360x720）  （iPhone 7 plus：分辨率 1242x2208，其實是 1080x1920，dpr 3，設備獨立像素 414x736） 看來還真是要拿真機體會一下啊，不然還真不知道0.5px的細線長什么樣啊。（安卓的屏幕分辨率也很高了，咋就不能顯示出來細線呢\[捂臉\]，這波對比，我服） * * * * * ### 現在回答上面的三個問題： **Q：這是個什么梗？** A：蘋果上可以顯示更細的線的梗。 **Q：（為）什么是1px？** A：設計師的1px和前端的1px，此（物理像素）非彼（點：設備獨立像素）。 **Q：為什么是邊框？** A：因為邊框不需要自適應。 * * * * * last update：2018-7-21 07:12:04