移动端一像素边框解决方案

scss

@function rem($val) {
  @return $val/75+rem;
}

@mixin border-1px($position, $color: #ccc, $position: relative, $radius: 0, $style: solid){
  position: $position;
  &::after{
    @if $position == 'l' {
      border-left: 1px $style $color;
    }@else if $position == 'r' {
      border-right: 1px $style $color;
    }@else if $position == 't' {
      border-top: 1px $style $color;
    }@else if $position == 'b' {
      border-bottom: 1px $style $color;
    }@else{
      border: 1px $style $color;
    }
    content: "";
    pointer-events: none;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    border-radius: $radius;
    box-sizing: border-box;
     100%;
    height: 100%;
    @media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2),(min-resolution: 2dppx){
      width: 200%;
      height: 200%;
      border-radius: $radius * 2;
      transform: scale(.5) translateZ(0)
    } 
    @media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3),(min-resolution: 3dppx){
      width: 300%;
      height: 300%;
      border-radius: $radius * 3;
      transform: scale(.333) translateZ(0);
    } 
  }
}

less

.direction(@direction) when (@direction = top){
    border-top: 1px @style @color;
}
.direction(@direction) when (@direction = bottom){
    border-bottom: 1px @style @color;
}
.direction(@direction) when (@direction = left){
    border-left: 1px @style @color;
}
.direction(@direction) when (@direction = right){
    border-right: 1px @style @color;
}
.direction(@direction) when (@direction = all){
    border: 1px @style @color;
}
.border-1px (@direction: all; @color: #cccccc; @position: relative; @radius: 0; @style: solid){
    position: @position;
    &::after{
        .direction(@direction);
        content: "";
        pointer-events: none;
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        transform-origin: 0 0;
        border-radius: @radius;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        @media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2),(min-resolution: 2dppx){
             200%;
            height: 200%;
            border-radius: @radius * 2;
            transform: scale(.5) translateZ(0)
        } 
        @media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3),(min-resolution: 3dppx){
            width: 300%;
            height: 300%;
            border-radius: @radius * 3;
            transform: scale(.333) translateZ(0);
        } 
    }
}

css

.box{
  margin: rem(100);
  width: rem(200);
  height: rem(200);
  background: #ccc;
  @include border-1px('', #000);
}