移动端一像素问题的解决方案

由于分辨率 DPI 的差异，高清手机屏上的 1px 实际上是由 2×2 个像素点来渲染，有的屏幕甚至用到了 3×3 个像素点

所以在实际的代码实现中，设置1px的边框，会渲染成2px.

虽然这一像素的差别，用户在实际体验中是很难察觉到的，但是作为一个具备‘像素眼’的前端来说，这是不可容忍的。
解决办法：

一、使用transform： scale

先使用伪类 :after 或者 :before 创建 1px 的边框，然后通过 media 适配不同的设备像素比，然后调整缩放比例，从而实现一像素边框

.border-bottom{
    position: relative;
}
.border-bottom::after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #e4e4e4;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
}

然后通过媒体查询来适配

/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.33);
        transform: scaleY(0.33);
    }
}

二、也可以偷懒使用图片代替，不过这个嘛。。你懂得

三、或者，直接rem设置。