【移動端debug-5】可惡的1px萬能實現方案

標籤：

最近和設計同學調ui，遇到的是一位對1px有極致追求的同學，像素眼一眼看出我寫的是不是1px，所以讓我好好地研究了一番1px到底怎麼寫最方便。

一、為什麼出不來1px？

簡而言之：css的1px只是一個抽象的單位，並非實際裝置中的1px。

關於retina屏：

我們知道現在iphone大多數型號都用上了retina屏，而retina屏的解析度相較於普通螢幕增加了一倍，也就是說原來1個像素寬度的地區可以塞進2個像素。我們css寫的1px是一個概念像素，在retina屏的實際裝置上佔了2px的位置。

而對於手機螢幕整體來說，一個標註了750寬的手機（iPhone6）在css中只需要375px就能表示。

 

二、如何在手機上寫出1px？

網上其實有人列了非常多的方案，有用transform的、有用圖片的、有用canvas的、還有用0.5px的……從操作簡易性來看，用transform的方案是比較簡單的，而且適配也比較容易（0.5px的方案安卓不支援）。

原理：寫一條1px的線，然後transform:scaleY(0.5)或scaleX(0.5)，就能夠將retina上顯示的2px縮小為實際螢幕中的1px。

 

三、幾種1px的樣式實踐方案

1、單線

2、四邊形

3、圓角四邊形

【移動端debug-5】可惡的1px萬能實現方案