移动端CSS 1像素边框问题、、、求解决方案

Question

在网上找了好多个版本的解决方案，但貌似没一个能完美解决问题的，请教下各位高手可有解决方案呢？如题：移动端CSS 1像素边框问题；

Answer 1

@media(-webkit-min-device-pixel-ratio:1.5),(min-device-aspect-ratio: 1.5)
  .border-1px
    &::before
      -webkit-transform scaleY(0.7)
      transform scaleY(0.7)
@media(-webkit-min-device-pixel-ratio:2),(min-device-aspect-ratio: 2)
  .border-1px
    &::before
      -webkit-transform scaleY(0.5)
      transform scaleY(0.5)
      
  border-1px($color)
  position relative
  &:after
    content ''
    position absolute
    left 0
    bottom 0
    width 100%
    border-bottom 1px solid $color

用stylus写的大致意思你应该能看懂

Answer 2

根据像素比，在 viewport 那里缩小。（比如像素比是 2 ，则 scale 就是 0.5 ，这样 2px 就可以变成 1px 了，但是 2px 这种与像素比有关的尺寸，要你自己处理好）

Answer 3

https://segmentfault.com/a/11...