移动端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/ 将网站生成二维码手机扫描打开