Retina屏的移动设备实现真正1px的线的解决方案

移动设备1px的线有时候看起来不对确实影响整体的美观，因此网上查了一下资料，找到两种比较好的解决方案，记录方便以后使用。

一、 淘宝M站是通过 viewport + rem 实现的

在devicePixelRatio = 2 时，输出viewport

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

在devicePixelRatio = 3 时，输出viewport

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

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

二、伪类 + transform

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

• 单条 border

.hairlines li{    position: relative;    border:none;
}.hairlines li:after{    content: '';    position: absolute;    left: 0;    background: #000;    width: 100%;    height: 1px;    -webkit-transform: scaleY(0.5);            transform: scaleY(0.5);    -webkit-transform-origin: 0 0;            transform-origin: 0 0;
}

• 四条 border

.hairlines li{    position: relative;    margin-bottom: 20px;    border:none;
}.hairlines li:after{    content: '';    position: absolute;    top: 0;    left: 0;    border: 1px solid #000;    -webkit-box-sizing: border-box;    box-sizing: border-box;    width: 200%;    height: 200%;    -webkit-transform: scale(0.5);    transform: scale(0.5);    -webkit-transform-origin: left top;    transform-origin: left top;    border-radius: 5px;/*实现圆角*/}

样式使用的时候，也要结合 JS 代码，判断是否 Retina 屏

if(window.devicePixelRatio && devicePixelRatio >= 2){    document.querySelector('ul').className = 'hairlines';
}

第二种有点小缺陷是 <td> 用不了，第二种使用会比较简单方便，
第一种使用起来比较会比较费劲。所以用第二种做了一个简单Demo。
效果：

1px.png

是不是瞬间看起来感觉棒棒哒！
真正手机看效果更好！

作者：独孤久见
链接：https://www.jianshu.com/p/ee67305e6388