移动端1像素边框问题的解决方案

关于dpr的问题可以看看张鑫旭大神的文章设备像素比devicePixelRatio简单介绍和简书一篇文章前端工程师需要明白的「像素」

下面直接开撸。。。。

使用媒体查询，定义不同最小像素比下的 类border-1px

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-aspect-ratio: 1.5) {
    .border-1px{
        &::after{
            transform:scaleY(0.7);    //1.5 * 0.7接近1
        }
    }
}   

@media (-webkit-min-device-pixel-ratio: 2),(min-device-aspect-ratio: 2) {
    .border-1px{
        &::after{
            transform:scaleY(0.5);    //2 * 0.5 = 1
        }
    }
}

@media (-webkit-min-device-pixel-ratio: 2.5),(min-device-aspect-ratio: 2.5) {
    .border-1px{
        &::after{
            transform:scaleY(0.4);    //2.5 * 0.4 = 1
        }
    }
}

@media (-webkit-min-device-pixel-ratio: 3),(min-device-aspect-ratio: 3) {
    .border-1px{
        &::after{
            transform:scaleY(0.333);    //3 * 0.333 接近 1
        }
    }
}

@media (-webkit-min-device-pixel-ratio: 3.5),(min-device-aspect-ratio: 3.5) {
    .border-1px{
        &::after{
            transform:scaleY(0.2857);    //3.5 * 0.2857 接近 1
        }
    }
}

定义mixin border-bottom

@mixin border-bottom($height,$color) {
  position:relative;

  &::after{
    position: absolute;
    display: block;
    left: 0;
    bottom: 0;
    width: 100%;
    border-top: $height solid $color;
    content: '';
  }
}


@mixin border-top($height,$color) {
    position:relative;

    &::after{
      position: absolute;
      display: block;
      left: 0;
      top: 0;
      width: 100%;
      border-top: $height solid $color;
      content: '';
    }
}

使用

<div id="navbar"></div>

如果想给#navbar添加一个1像素的下边框，先给#navbar添加一个类border-1px如下：

<div id="navbar" class="border-1px"></div>

然后给#navbar设置样式：

#navbar{
    @include border-bottom(1px, #ccc);
}