1px 問題指的是：在一些 Retina屏幕 的機型上，移動端頁面的 1px 會變得很粗，呈現(xiàn)出不止 1px 的效果。原因很簡單——CSS 中的 1px 并不能和移動設(shè)備上的 1px 劃等號。它們之間的比例關(guān)系有一個專門的屬性來描述：

打開 Chrome 瀏覽器，啟動移動端調(diào)試模式，在控制臺去輸出這個 devicePixelRatio 的值。這里選中 iPhone6/7/8 這系列的機型，輸出的結(jié)果就是2：

這就意味著設(shè)置的 1px CSS 像素，在這個設(shè)備上實際會用 2 個物理像素單元來進行渲染，所以實際看到的一定會比 1px 粗一些。 解決1px 問題的三種思路：

思路一：直接寫 0.5px

如果之前 1px 的樣式這樣寫：

可以先在 JS 中拿到 window.devicePixelRatio 的值，然后把這個值通過 JSX 或者模板語法給到 CSS 的 data 里，達到這樣的效果（這里用 JSX 語法做示范）：

然后就可以在 CSS 中用屬性選擇器來命中 devicePixelRatio 為某一值的情況，比如說這里嘗試命中 devicePixelRatio 為2的情況：

直接把 1px 改成 1/devicePixelRatio 后的值，這是目前為止最簡單的一種方法。這種方法的缺陷在于兼容性不行，IOS 系統(tǒng)需要8及以上的版本，安卓系統(tǒng)則直接不兼容。

思路二：偽元素先放大后縮小

這個方法的可行性會更高，兼容性也更好。唯一的缺點是代碼會變多。

思路是先放大、后縮?。涸谀繕?biāo)元素的后面追加一個 ::after 偽元素，讓這個元素布局為 absolute 之后、整個伸展開鋪在目標(biāo)元素上，然后把它的寬和高都設(shè)置為目標(biāo)元素的兩倍，border值設(shè)為 1px。接著借助 CSS 動畫特效中的放縮能力，把整個偽元素縮小為原來的 50%。此時，偽元素的寬高剛好可以和原有的目標(biāo)元素對齊，而 border 也縮小為了 1px 的二分之一，間接地實現(xiàn)了 0.5px 的效果。

代碼如下：

思路三：viewport 縮放來解決