移動端1px邊框的實現

1.爲什麼出不來1px？

簡而言之：css的1px只是一個抽象的單位，並非實際設備中的1px。

關於retina屏：
我們知道現在iphone大多數型號都用上了retina屏，而retina屏的分辨率相較於普通屏幕增加了一倍，也就是說原來1個像素寬度的區域內可以塞進2個像素了。我們css寫的1px是一個概念像素，在retina屏的實際設備上佔了2px的位置。

而對於手機屏幕整體來說，一個標註了750寬的手機（iPhone6）在css中只需要375px就能表示。

2.如何在手機上寫出1px

網上其實有人列了非常多的方案，有用transform的、有用圖片的、有用canvas的、還有用0.5px的……從操作簡易性來看，用transform的方案是比較簡單的，而且適配也比較容易（0.5px的方案安卓不支持）。

原理：寫一條1px的線，然後 transform:scaleY(0.5)或scaleX(0.5)，就能夠將retina上顯示的2px縮小爲實際屏幕中的1px。

3.微信WeUI上1px邊框的實現代碼

.weui_grid::after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #D9D9D9;
    color: #D9D9D9;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
}

說明：在需要1px邊框的元素上使用僞類選擇器（：after，：before）生成一個內容爲空，高度爲1px的元素，然後進行絕對定位，最後通過transform：scaleY（0.5）對Y軸進行縮放。如果需要1px的左右邊框，將width設置爲1px，height設置爲100%，邊框選擇border-left或border-right，對X軸進行縮放即可。

4.使用min-device-pixel-ratio媒體功能自主查詢

.border-1px::after{
  content: " ";
  position: absolute;
  top:50px;
  left:0;
  width: 100%;
  height: 1px;
  border-bottom: 1px solid #000;
}
@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
    .border-1px::after{
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}