開發(fā)過移動H5或者混合APP的前端小伙伴，估計都體會過各個機(jī)型兼容適配的痛苦。有時候為了 1px 而絞盡腦汁，本文就詳細(xì)介紹一下 Retina (視網(wǎng)膜)屏幕的 1px 的實現(xiàn)方法。

DPR 1PX

背景

如果僅僅使用 css 的 1px 來設(shè)置 border ，那可能會出現(xiàn)比較粗的情況。因為有些手機(jī)屏幕的 DPR = 2，還有 DPR = 3 的情況，即 1px 它會用兩個物理像素來顯示，自然就粗了。
而這時候，你不能直接寫 0.5px ，因為瀏覽器兼容性不好，渲染出來可能還是 1px 的效果，甚至無法正常顯示。

PS：DPR 即為像素比，是 Window 對象下的一個屬性，可以用以下方法獲取。

const DPR = window.devicePixelRatio

解決單邊框 border 問題

我們可以使用 css 偽類 + transform 縮小來優(yōu)化這一問題。即把默認(rèn)的 1px 寬度給壓縮 0.5 倍。

#box {
    width: 200px;
    height: 100px;
    padding: 10px 0;
    position: relative;
}

#box::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #333;
    transform: scaleY(0.5);
    transform-origin: 0 0;
}

解決 border-radius 為 1px 的情況

如果有 border-radius 就不能使用 transform 進(jìn)行縮放了，因為如果是整體縮放，肯定會影響其中的content內(nèi)容，這時就可以巧用 box-shadow 設(shè)置來解決。

box-shadow屬性的值依次是：

• X 偏移量 0
• Y 偏移量 0
• 陰影模糊半徑 0
• 陰影擴(kuò)散半徑 0.5px
• 陰影顏色 #333

#box {
    width: 200px;
    height: 100px;
    margin-top: 20px;
    padding: 10px;
    border-radius: 10px;
    /* border: 1px solid #333; */
    box-shadow: 0 0 0 0.5px #333;
}

Perfect solution ^_

歡迎訪問：天問博客