移动端设置border的1px像素解决方案

可能有人会问，设置边框1px问题，直接 border:1px soild #ccc; 不就完事了，为什么需要这么麻烦？
因为移动端的dpr设备像素比不同，直接设置会出现边框加粗问题，亲们可以自行测试，这里不做过多阐述。
下面直接上解决方案。

1.为了方便通用，在 base.scss 文件中 使用 mixin 定义一个函数。（mixin是sass定义函数的关键字）

@mixin border-1px($color) {
    position: relative;
    // 添加伪类
    &:after{
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1px;
        width: 100%;
        border-top: 10px solid $color;
        content: '';
    }
}

2.页面使用函数

3.在 base.scss 文件中写。对 伪类 :after 进行缩放，以适应不同 dpr 的手机。通过 @media (媒体查询)，来确定 设备的 dpr。 为了方便调用，定义一个全局的 class (此处为 border-1px)；

/*判断在不同dpr下的显示情况*/
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
    .border-1px{
        &::after{
            -webkit-transform: scaleY(0.7);
            transform: scaleY(0.7);
        }
    }
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
    .border-1px{
        &::after{
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }
    }
}

4.页面使用定义的 border-1px 类

<div class="tab border-1px">
  <div class="tab-item">
    <a v-link="{path:'/goods'}">商品a>
  div>
  <div class="tab-item">
    <a v-link="{path:'/ratings'}">评价a>
  div>
  <div class="tab-item">
    <a v-link="{path:'/seller'}">商家a>
  div>
div>

5.测试效果，1px 看不出效果，这里我设置的是10px方便测试查看；
①：设置为10px，没有使用上面第步骤三做dpr处理效果

②：设置10px，使用了上面步骤三做dpr处理效果，明显细了一半。由此可以得出设置1px也会缩小一半，解决了设置1px，真机下会2px加粗的效果。