如何解决移动端 Retina 屏 1px 像素问题 ？

[MrSeaWave]

参考 https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/513#issuecomment-883756172

[MrSeaWave]

https://juejin.cn/post/6844903877947424782#heading-13

[MrSeaWave]

伪元素 + transform

@mixin onepx($positions: top right bottom left, $border-color: #ddd, $border-radius: 0) {
  &:after {
    content: '';
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-width: 0;
    border-radius: $border-radius;
    @each $position in $positions {
      border-#{$position}: 1px solid $border-color;
    }

    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
      width: 200%;
      height: 200%;
      transform: scale(0.5);
      transform-origin: 0 0;
      border-radius: $border-radius * 2;
    }
  }
}