解决移动端适配1px问题

核心思路：

在web中，浏览器为我们提供了window.devicePixelRatio来帮助我们获取dpr，在css中可以使用媒体查询min-device-pixel-ratio区分dpr。
我们根据这个像素比，来算出他对应大小,但是暴露个非常大的兼容问题

暴露的问题：

Chrome把0.5px四舍五入变成了1px，而firefox/safari能够画出0.5px，Chrome会把小于0.5px的当成0，而Firefox会把不小于0.55px当成1px，Safari是把不小于0.75px当成1px，进一步在手机上观察iOS的Chrome会画出0.5px的边，而安卓(5.0)原生浏览器是不行的。所以直接设置0.5px不同浏览器的差异比较大，并且我们看到不同系统的不同浏览器对小数点的px有不同的处理。所以如果我们把单位设置成小数的px包括宽高等不太可靠，因为不同浏览器表现不一样，所以要采用另外的一种实现思路

transform: scale(0.5)

根据设备像素比媒体查询后的解决方案

/* 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);
    }
}

注意要做好css前缀的兼容处理