H5常碰見的問題———移動端1px解決（完整版）

　在某個夜黑風高的晚上，程序員小A正在開開心心的準備收拾東西回家。這時候，手機忽然震動了一下。小A下意識的想到，確定是大事很差了。果不其然，是設計大佬發來消息了。。。

設計大佬：小A，怎麼這個0.5dp（0.5dp=1px）的邊框比實際的還粗啊

小A：好的，我如今去看一下（沒道理啊，我明明記得我寫了1px的，不可能會粗啊，難道我忘了嗎）

閱讀完代碼以後....

小A：設計大佬，我這裏已經寫了1px了，他就是1px了，不信你看看，會粗一點多是手機h5會把1px畫粗一點吧

設計大佬：可是不少h5頁面也有1px的邊框啊

小A：好的，那我再去調研一下（大佬說話，不得不低調，仍是先彆着急，可能另有起色呢）

通過一番調研後....

小A頓然醒悟，果真1px的問題不少人都遇到，網上也有不少方案，可是看起來亂七八糟的，又沒講明原理，萬一下次再碰到，那該怎麼辦呢。這是他有了一個idea，不如本身整理一下，也方便你們記憶

1px原理篇

在講原理以前，先跟你們說一個概念，就是設備像素比DPR(devicePixelRatio)是什麼

DPR = 設備像素 / CSS像素(某一方向上)

這句話看起來很難理解，能夠結合下面這張圖（1px在各個DPR上面的展現），通常咱們h5拿到的設計稿都是750px的，可是若是在DPR爲2的屏幕上，手機的最小像素倒是要用2 * 2px來進行繪製，這也就致使了爲何1px會比較粗了。

解決方法

解決辦法有不少種，在這裏幫你們比較下方案：

方案	優勢	缺點
使用0.5px實現	代碼簡單，使用css便可	IOS及Android老設備不支持
使用border-image實現	兼容目前全部機型	修改顏色不方便
經過 viewport + rem 實現	一套代碼，全部頁面	和0.5px同樣，機型不兼容
使用僞類 + transform實現	兼容全部機型	不支持圓角
box-shadow模擬邊框實現	兼容全部機型	box-shadow不在盒子模型，須要注意預留位置

以上的方案在網上均可以找到示例，我這裏只提供兩個本人常用的方案：

box-shadow

box-shadow是本人最經常使用的，除了在Android4.4如下發現小於1p的shadow沒法顯示以外，其餘的都是好的

// 下邊框
box-shadow: 0 1px #E9E9E9;

// 全邊框
box-shadow: 0 -1px #D9D9D9, 1px 0 #D9D9D9, 0 1px #D9D9D9, -1px 0 #D9D9D9;

// 其餘的能夠看看API更深刻了解這個API

使用僞類 + transform實現

目前京東的h5網頁就是使用使用僞類 + transform實現

// 左邊框，若是須要修改邊框位置，能夠修改元素top，left，right，bottom的值便可
&::before {
    position: absolute;
    top: 0;
    left: 0;
    content: '\0020';
    width: 100%;
    height: 1px;
    border-top: 1px solid #E9E9E9;
    transform-origin: 0 0;
    overflow: hidden;
}

@media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49) {
    &::before {
      transform: scaleY(0.5);
    }
}

@media (-webkit-min-device-pixel-ratio: 2.5) {
    &::before {
      transform: scaleY(0.33333);
    }
}

市面上其餘網頁的處理方案

參考了下目前的前沿技術某東和某寶的頁面

發現某寶是使用div+width來進行實現，所以推斷某寶應該是使用了經過 viewport + rem + div 的方法

某東如上面的使用了僞類 + transform實現

總結

設計師有時候很嚴格也是件好事

參考資料：

https://main.m.taobao.com/

https://m.jd.com/

https://juejin.im/post/684490...

https://www.kelede.win/posts/...