如何解決 1px 問題？

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

window.devicePixelRatio = 設(shè)備的物理像素 / CSS像素。?

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

這就意味著設(shè)置的 1px CSS 像素，在這個(gè)設(shè)備上實(shí)際會(huì)用 2 個(gè)物理像素單元來進(jìn)行渲染，所以實(shí)際看到的一定會(huì)比 1px 粗一些。?

解決 1px 問題的三種思路：

思路一：直接寫 0.5px

如果之前 1px 的樣式這樣寫：border: 1px solid #333?

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

<div id="container" data-device={{window.devicePixelRatio}}></div>

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

#container[data-device="2"] {

? border:0.5px solid #333

}

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

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

這個(gè)方法的可行性會(huì)更高，兼容性也更好。唯一的缺點(diǎn)是代碼會(huì)變多。

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

代碼如下：

思路三：viewport 縮放來解決

這個(gè)思路就是對(duì) meta 標(biāo)簽里幾個(gè)關(guān)鍵屬性下手：

這里針對(duì)像素比為 2 的頁面，把整個(gè)頁面縮放為了原來的 1/2 大小。這樣，本來占用 2 個(gè)物理像素的 1px 樣式，現(xiàn)在占用的就是標(biāo)準(zhǔn)的一個(gè)物理像素。根據(jù)像素比的不同，這個(gè)縮放比例可以被計(jì)算為不同的值，用 js 代碼實(shí)現(xiàn)如下：

這樣解決了，但這樣做的副作用也很大，整個(gè)頁面被縮放了。這時(shí) 1px 已經(jīng)被處理成物理像素大小，這樣的大小在手機(jī)上顯示邊框很合適。但是，一些原本不需要被縮小的內(nèi)容，比如文字、圖片等，也被無差別縮小掉了。