最經常使用的移動端1像素邊框解決方法

爲何移動端css裏面寫了1px, 實際看起來比1px粗. 其實緣由很好理解。由於css中的1px並不等於移動設備的1px，這些因爲不一樣的手機有不一樣的像素密度。在window對象中有一個devicePixelRatio屬性，他能夠反應css中的像素與設備的像素比。

devicePixelRatio的官方的定義爲：設備物理像素和設備獨立像素的比例，也就是
    devicePixelRatio = 物理像素 / 獨立像素。
複製代碼

效果以下圖：

很明顯圖一要比圖二更粗，這就是所謂的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