最常用的移動端1畫素邊框解決方法

zhanzhan_wu發表於2018-02-11

為什麼移動端css裡面寫了1px, 實際看起來比1px粗. 其實原因很好理解。因為css中的1px並不等於移動裝置的1px，這些由於不同的手機有不同的畫素密度。在window物件中有一個devicePixelRatio屬性，他可以反應css中的畫素與裝置的畫素比。

    devicePixelRatio的官方的定義為：裝置物理畫素和裝置獨立畫素的比例，也就是
    devicePixelRatio = 物理畫素 / 獨立畫素。
複製程式碼

效果如下圖：

>1畫素

1畫素
很明顯圖一要比圖二更粗，這就是所謂的1px區別，當然在pc端上效果是一樣的。

實現方法

  • 偽類 + transform
li{position: relative;}
li:after{
  position: absolute;
  bottom:0;
  left:0;
  content: '';
  width:100%;
  height:1px;
  border-top:1px solid black;
  transform: scaleY(0.5);//注意相容性
}
複製程式碼

這種方式的原理很簡單，就是把原先元素的 border 去掉，然後利用 :before 或者 :after 重做 border ，並 transform 的 scale 縮小一半，原先的元素相對定位，新做的 border 絕對定位。個人認為這是比較完美的做法。

  • viewport + rem(ios)

同時通過設定對應viewport的rem基準值，這種方式就可以像以前一樣輕鬆愉快的寫1px了。

在devicePixelRatio = 2 時，輸出viewport：

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
複製程式碼

在devicePixelRatio = 3 時，輸出viewport：

<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">
複製程式碼

這種相容方案相對比較完美，適合新的專案，老的專案修改成本過大,詳細請參考。

  • 使用box-shadow模擬邊框

利用css 對陰影處理的方式實現0.5px的效果。

.box-1px {
  box-shadow: inset 0px -1px 1px -1px black;
}
複製程式碼

這是我自認為比較簡便的幾種方法，當然也還有其他的實現方式，這個看個人喜歡吧。不喜勿噴，謝謝！

相關文章參考

1.佈局解析: http://www.h5cn.com/html5/jishu/201616797_2.html

2.淘寶方案lib-flexible,px換算成rem: http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html?utm_source=tuicool&utm_medium=referral

3.h5 1px問題解決方案:http://www.tuicool.com/articles/ZRv6bun

相關文章