移动端1px线 sass 解决方案 记录

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_45430248/article/details/102709383

1px兼容问题

博客地址：https://www.cnblogs.com/katydids/p/9948546.html

// $border-poses:top,
// right,
// bottom,
// left;
// $color:red;
@mixin border-1px($poses:$border-poses, $color:$color) {
    position: relative;

    &::after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;

        @each $pos in $poses {
            border-#{$pos}: 1px solid $color;
            #{$pos}: 0;
        }
    }
}

@media (-webkit-min-device-pixel-ratio:1),(min-device-pixel-ratio: 1) {
    .border-1px &::after {
        width: 100%;
        height: 100%;
        transform: scale(1);
    }
}

@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio: 2) {
    .border-1px &::after {
        width: 200%;
        height: 200%;
        transform: scale(0.5);
    }
}

@media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio: 3) {
    .border-1px &::after {
        width: 300%;
        height: 300%;
        transform: scale(0.333);
    }
}

//用法
@import '~../../../assets/global-styles/sass/border.scss';
.footer-box {
    width: 100%;
    height: .48rem;
    @include border-1px(top,#ccc);
}