移动端1px

解决方案

tips: 伪元素 + transfrom 进行缩放，伪元素的缩放不会影响元素本身

HTML

<div class="box border-1px"><div>

• CSS版

/* box css */
.box {
  width: 200px;
  height: 200px;
  position: relative;
}

/* 全部边框 */
.border-1px::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  border: 1px solid black;
  transform-origin: top left;
  transform: scale(0.5);
}

/* 单边框（以上边框为例） */
.border-1px-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-top: 1px solid red;
  transform-origin: top left;
  transform: scaleY(0.5);
}

• SCSS版（自用版）

@mixin border-1px($direction, $color) {
  position: relative;
  &::before {
    content: "";
    pointer-events: none;
    box-sizing: border-box;
    position: absolute;
    #{$direction}: 0;
    border-#{$direction}: 1px solid $color;
    transform-origin: 0 0;
    @if $direction == top or $direction == bottom {
      width: 100%;
      height: 1px;
      transform: scaleY(0.5);
    } @else if $direction == left or $direction == right {
      width: 1px;
      height: 100%;
      transform: scaleX(0.5);
    }
  }
}

// 使用
.box {
  @include border-1px(right, red);
}

• 查看效果

效果

参考方案

• ant-design-mobile 版，添加了媒体查询，当设备的DPR不同时，缩放值也不同。

• vant 版