移动端1px 边框

.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;
}
//在用media适配不同的设备像素比

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

这样的做法用于分割线较多，很少用在写某个盒子的边框上；

<script type="text/javascript">
   (function() {
       var scale = 1.0;
       if (window.devicePixelRatio === 2) {
           scale *= 0.5;
       }
       if (window.devicePixelRatio === 3) {
           scale *= 0.333333;
       }
       var text = '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale +', minimum-scale=' + scale + ', width=device-width, user-scalable=no" />';
       document.write(text);       
    })();
</script>

这样也是不错的解决方法

**在一次开发中用到vux-ui这个前端组件里面有处理1px边框的问题，**方法如下
在你项目的App.vue引入，组件内不需要再重复引入。

<style lang="less">
@import '~vux/src/styles/1px.less';
</style>

用的时候直接在要用的盒子上加上相应的类名
类名有

• vux-1px-l 左边框
• vux-1px-r 右边框
• vux-1px-t 上边框
• vux-1px-b 下边框
• vux-1px-tb 上下边框
• vux-1px 全边框
  vux-ui中的方法其实也是用伪元素写的，只不过是把伪元素的宽高都扩大了1倍即200%，然后在用transform缩放一半

    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 15px;
    border: 1px solid #C7C7C7;
    color: #C7C7C7;
    width: 200%;
    height: 200%;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);