移动端1px边框 -- 伪元素

脑补： 伪元素 vs 伪类

伪元素： before after ...
    ——最好是使用 &::after

伪类： hover select nth-child ...
    ——一般用法 a:hover{}

接下来的都是套路

1. 给元素创造伪元素

    a::after{
        display: block
        position: absolute
        left: 0
        bottom: 0
        width: 100%
        border-top: 1px solid $color
        content: ' '
    }

1. 给上面的a设置class 让他的伪元素缩放

    //html
    <a class="border-1px"></a>

    //style 根据不同的屏幕，设置不同的缩放比例
    @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)

1. 大功告成 现在去手机端测试

win+R => cmd =>ipconfig
查看到  IPv4 地址 . . . . . . . . . . . . : 192.168.x.xx
将浏览器的地址localhost:8080 => 192.168.x.xx:8080
打开http://cli.im/ 将网站生成二维码
手机扫描打开