关于移动端1px差异的解决方案

分两种写法

1.通过给父元素设置定位和伪类选择器进行设置

@mixin setTopBorder($color) {
    & {
        /*给父元素设置定位*/
        position: relative;
    }
    /*使用伪类选择器*/
    &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 1px;
        background: $color;
        transform: scaleX(0.5)
    }
}
@mixin setBottomBorder($color) {
    & {
        position: relative;
    }
    &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background: $color;
        transform: scaleX(0.5)
    }
}
.nav {
    @include setTopBorder(#000);
}
.nav {
    @include setBottomBorder(red);
}

2.

@mixin setTopBorder($color) {
　　
    & {
        border-top: 1px solid $color;
    }
    @media screen and (-webkit-min-device-pixel-ratio:2) {
        & {
            border-top: 0.5px solid $color;
        }
    }
    @media screen and (-webkit-min-device-pixel-ratio:3) {
        & {
            border-top: 0.333333px solid $color;
        }
    }
}

@mixin setBottomBorder($color) {
    & {
        border-bottom: 1px solid $color;
    }
    @media screen and (-webkit-min-device-pixel-ratio:2) {
        & {
            border-bottom: 0.5px solid $color;
        }
    }
    @media screen and (-webkit-min-device-pixel-ratio:3) {
        & {
            border-bottom: 0.333333px solid $color;
        }
    }
}

.nav {
    @include setTopBorder(red);
    @include setBottomBorder(red);
}

 

转载于:https://www.cnblogs.com/yy0419/p/11155958.html