为什么会出现？

首先了解两个像素：设备的物理像素[设备像素] & 虚拟像素[CSS像素] & 逻辑像素[设备独立像素]
- 物理像素：移动设备出厂时，不同设备的屏幕自带的不同屏幕像素，也称硬件像素；
- 虚拟像素：即css中记录的像素
- 逻辑像素：计算机坐标系统中的一个点，是由程序使用的虚拟像素(比如: CSS 像素)，这个点没有固定大小，越小越清晰，可由相关系统转换为物理像素
devicePixelRatio（DPR）：反应css中的像素与设备的像素比
- DPR为设备像素（物理像素）和设备独立像素（逻辑像素）的比例
- DPR = 物理像素 / 独立设备像素
1px变粗的原因：
- viewport的设置和屏幕物理分辨率是按比例而不是相同的. 移动端window对象有个devicePixelRatio属性,它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3,css里写的1px长度映射到物理像素上就有2px或3px那么长
  如何解决（最佳解决方案）？

transform: scale(0.5) 方案

设置height: 1px，根据媒体查询结合transform缩放为相应尺寸

div {
    height:1px;
    background:#000;
    -webkit-transform: scaleY(0.5);
    -webkit-transform-origin:0 0;
    overflow: hidden;
}

用::after和::befor,设置border-bottom：1px solid #000,然后在缩放-webkit-transform: scaleY(0.5);可以实现两根边线的需求
```
div::after{
    content:'';
    width:100%;
    border-bottom:1px solid #000;
    transform: scaleY(0.5);
}
```

用::after设置border：1px solid #000; width:200%; height:200%,然后再缩放scaleY(0.5); 优点可以实现圆角，京东就是这么实现的，缺点是按钮添加active比较麻烦

.div::after {
    content: '';
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
    -webkit-transform: scale(0.5,0.5);
    transform: scale(0.5,0.5);
    -webkit-transform-origin: top left;
}

媒体查询 + transfrom

/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.33);
        transform: scaleY(0.33);
    }
}