css 温故而知新 1px的问题

解决方法1：

//border 
@mixin border($pos, $color) {
    content: "";
    position: absolute;
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    @if $pos=='top'{
        #{$pos}: 0px;
        left: 0px;
        right: 0px;
        border-#{$pos}: 1px solid $color;
        transform: scaleY(.5);
        -webkit-transform: scaleY(.5);
    } @else if $pos=='bottom' {
         #{$pos}: 0px;
        left: 0px;
        right: 0px;
        border-#{$pos}: 1px solid $color;
        transform: scaleY(.5);
        -webkit-transform: scaleY(.5);
    } @else {
        top: 0px;
        bottom: 0px;
        #{$pos}: 0px;
        border-#{$pos}: 1px solid $color;
        transform: scaleX(.5);
        -webkit-transform: scaleX(.5);
    }
}

使用方式：

.div {
  position:relative;

  &:after {
    @include border("bottom", #d9d9d9)
    left: pxToRem(30px);  /* 美化，不喜欢可以不加 */
  }
}

 

解决方式2：

.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.333333px solid #999 }
}