移动端1px问题

参考地址：https://juejin.im/post/6874940963635232775

参考地址：https://juejin.im/post/6844903877947424782

参考地址：https://juejin.im/entry/6844903456717668359

CSS像素、设备独立像素、设备像素之间关系：https://www.cnblogs.com/jiangzilong/p/6700023.html

移动端web开发中，UI设置的边框为1px，前端开发过程中也设置border:1px，测试会发现在retina屏中，1px会比较粗，这就是经典的移动端1px问题。

retina屏：在一个逻辑像素上用多个物理像素去展示，dpr=window.devicePixelRatio=物理像素/CSS像素，dpr为1时，1个逻辑像素，也是使用1个物理像素显示；dpr为2时，1个逻辑像素，使用4个物理像素组成；可以理解为retina屏上的一个逻辑像素被横向和竖向分割了dpr份，每份就是一个物理像素点。

例如：iPhone6的设备像素比dpr为2，物理像素是750（x轴），它的逻辑像素是375，则映射到物理像素上就是2px，dpr为3同理。

解决办法：

1. 0.5px方案

IOS8+苹果支持0.5px，借助媒体查询处理

. border { border: 1px solid #999;}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  . border { border: 0.5px solid #999;}      
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
  . border { border: 0.333333px solid #999;}      
}

缺点：0.46px的时候不显示，IOS7及一下和Android等其他系统里，0.5px将会被显示为0px。所以还需要判断是否支持0.5px

if (window.devicePixelRatio && devicePixelRatio >= 2) {
  var testElem = document.createElement('div');
  testElem.style.border = '.5px solid transparent';
  document.body.appendChild(testElem);
  if (testElem.offsetHeight == 1) {
    document.querySelector('html').classList.add('hairlines');
  }
  document.body.removeChild(testElem);
}
// 脚本应该放在body内，如果在里面运行，需要包装 $(document).ready(function() {})
div {
　　border: 1px solid #bbb;
}
.hairlines div {
　　border- 0.5px;
}

2. 伪类+transform（推荐）

原理：把原先元素的border去掉，然后利用:before或者:after重做border，并transform的scale缩小一半，原先的元素相对定位，新做的border绝对定位。

/*手机端实现真正的一像素边框*/
.border-1px, .border-bottom-1px, .border-top-1px, .border-left-1px, .border-right-1px {
    position: relative;
}

/*线条颜色 黑色*/
.border-1px::after, .border-bottom-1px::after, .border-top-1px::after, .border-left-1px::after, .border-right-1px::after {
    background-color: #000;
}

/*底边边框一像素*/
.border-bottom-1px::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    transform-origin: 0 0;
}

/*上边边框一像素*/
.border-top-1px::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    transform-origin: 0 0;
}

/*左边边框一像素*/
.border-left-1px::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    transform-origin: 0 0;
}

/*右边边框1像素*/
.border-right-1px::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    height: 100%;
    transform-origin: 0 0;
}

/*边框一像素*/
.border-1px::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 1px solid gray;
}


/*设备像素比*/
/*显示屏最小dpr为2*/
@media (-webkit-min-device-pixel-ratio: 2) {
    .border-bottom-1px::after, .border-top-1px::after {
        transform: scaleY(0.5);
    }

    .border-left-1px::after, .border-right-1px::after {
        transform: scaleX(0.5);
    }

    .border-1px::after {
        width: 200%;
        height: 200%;
        transform: scale(0.5);
        transform-origin: 0 0;
    }
}

/*设备像素比*/
@media (-webkit-min-device-pixel-ratio: 3)  {
    .border-bottom-1px::after, .border-top-1px::after {
        transform: scaleY(0.333);
    }

    .border-left-1px::after, .border-right-1px::after {
        transform: scaleX(0.333);
    }

    .border-1px::after {
        width: 300%;
        height: 300%;
        transform: scale(0.333);
        transform-origin: 0 0;
    }
}
/*需要注意<input type="button">是没有:before, :after伪元素的*/

优点：所有场景都能满足，支持圆角（伪类和本体类都需要加border-radius）。

缺点：代码量也很大，对于已经使用伪类的元素，可能需要多层嵌套。

3. viewport + rem（推荐）

通过设置对应viewport的rem基准值，这种方式就可以像以前一样轻松愉快的写1px了。

在devicePixelRatio=2时，设置meta:

<meta name="viewport" content="width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

在devicePixelRatio=3时，设置meta:

<meta name="viewport" content="width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

实例验证：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>移动端1px问题</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta name="viewport" id="WebViewport"
        content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <style>
        html {
            font-size: 11px;
        }
        body {
            padding: 1rem;
        }
        * {
            padding: 0;
            margin: 0;
        }
        .item {
            padding: 1rem;
            border-bottom: 1px solid gray;
            font-size: 1.2rem;
        }
    </style>
    <script>
        var viewport = document.querySelector("meta[name=viewport]");
        var dpr = window.devicePixelRatio || 1;
        var scale = 1 / dpr;
        //下面是根据设备dpr设置viewport
        viewport.setAttribute(
            "content", +
            "width=device-width," +
            "initial-scale=" +
            scale +
            ", maximum-scale=" +
            scale +
            ", minimum-scale=" +
            scale +
            ", user-scalable=no"
        );

        var docEl = document.documentElement;
        var fontsize = 10 * (docEl.clientWidth / 320) + "px";
        docEl.style.fontSize = fontsize;
    </script>
</head>
<body>
    <div class="item">border-bottom: 1px solid gray;</div>
    <div class="item">border-bottom: 1px solid gray;</div>
</body>
</html>

优点：所有场景都能满足，一套代码，可以兼容基本所有布局。

缺点：老项目修改代价太大，只适用于新项目。

4.border-image

首先准备一张符合你要求的border-image，通常手机端的页面设计稿都是放大一倍的，如：为适应iphone retina，设计稿会设计成750*1334的分辨率，图片按照2倍大小切出来，在手机端看着就不会虚化，非常清晰。同样，在使用border-image时，将border设计为物理1px，如下：

样式设置：

.border-image-1px {
    border-width: 0 0 1px 0; // 上 右 下 左
    border-image: url(linenew.png) 0 0 2 0 stretch; //
}

上文是把border设置在边框的底部，所以使用的图片是2px高，上部的1px颜色为透明，下部的1px使用视觉规定的border的颜色。如果边框底部和顶部同时需要border，可以使用下面的border-images，

样式设置：

.border-image-1px {
    border-width: 1px 0; // 上下 左右
    border-image: url(linenew.png) 2 0 stretch;
}

到目前为止，我们已经能在iPhone上展现1px border的效果了。但是我们发现这样的方法在非视网膜屏上会出现border显示不出来的现象，于是使用Media Query做了一些兼容，样式设置如下：

.border-image-1px {
    border-bottom: 1px solid #666;
} 

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .border-image-1px {
        border-bottom: none;
        border-width: 0 0 1px 0;
        border-image: url(../img/linenew.png) 0 0 2 0 stretch;
    }
}

优点：可以设置单条，多条边框，没有性能瓶颈的问题

缺点：修改颜色麻烦，需要替换图片；圆角需要特殊处理，并且边缘会模糊

5. background-image

background-image跟border-image的方法一样，你要先准备一张符合你要求的图片。然后将边框模拟在背景上：

样式设置：

.background-image-1px {
  background: url(../img/line.png) repeat-x left bottom;
  background-size: 100% 1px;
}

优点：可以设置单挑，多条边框，没有性能瓶颈的问题。

缺点：修改颜色麻烦，需要替换图片；圆角需要特殊处理，并且边缘会模糊。

6. postcss-write-svg

使用border-image每次都要去调整图片，总是需要成本的。基于上述的原因，我们可以借助于PostCSS的插件postcss-write-svg来帮助我们。如果你的项目中已经有使用PostCSS，那么只需要在项目中安装这个插件。然后在你的代码中使用：

@svg 1px-border {
    height: 2px;
    @rect {
      fill: var(--color, black);
      width: 100%;
      height: 50%;
    }
}
.example {
    border: 1px solid transparent;
    border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
 }

这样PostCSS会自动帮你把CSS编译出来

.example {
    border: 1px solid transparent;
    border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E")
          2 2 stretch;
  }

这个方案简单易用，基本能达到我所需要的需求。

7. box-shadow

box-shadow: inset 0px -1px 1px -1px black;

优点：使用简单，圆角可以实现

缺点：模拟的实现方法，仔细看就会都分辨出不是边框

8. 多背景渐变实现

与background-image方案类似，只是将图片替换为css3渐变。设置1px的渐变背景，50%有颜色，50%透明。

.background-gradient-1px {
background:
linear-gradient(180deg, black, black 50%, transparent 50%) top left / 100% 1px no-repeat,
linear-gradient(90deg, black, black 50%, transparent 50%) top right / 1px 100% no-repeat,
linear-gradient(0, black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat,
linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left / 1px 100% no-repeat;
}
/* 或者 */
.background-gradient-1px{
background: -webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, #c8c7cc), to(#c8c7cc)) left bottom repeat-x;
background-size: 100% 1px;
}