移动端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);
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 移动端1像素的问题 问题:一般在移动端,由于dpr(设备像素比)不为1,在PC端显示1像素的边框,在移动端其实显示...
    程序员之路阅读 589评论 0 1
  • 在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了。原谅我的近视眼,为什么我看不出什么差距了,结果UI把...
    hlemon阅读 49,805评论 13 91
  • 一、meta标签的效果 移动端页面一般会在head头部添加如下meta标签。 该meta标签是否添加对页面渲染的影...
    nimw阅读 3,649评论 0 5
  • 一些基本概念 viewport 视窗 在桌面浏览器中,viewport就是浏览器窗口的宽度高度。但在移动端设备上,...
    Cruyun阅读 1,617评论 0 2
  • 春花秋月何时了,往事知多少。 小轩昨夜又东风,故乡不堪回首月明中。 雕栏玉砌应犹在,只是朱颜未改。 问君今日能有几...
    达鲁花赤阅读 235评论 0 0