1px实现方案

JS处理

首先，可以通过 window.devicePixelRatio 拿到设备的像素比，然后给 html 标签加上的相应的样式。

function retina () { // 高分辨率屏幕处理
    if (navigator.userAgent.toUpperCase().indexOf('IPHONE OS') !== -1) return; // IOS会缩放，不处理
    var classNames = [];
    var pixelRatio = window.devicePixelRatio || 1;
    classNames.push('pixel-ratio-' + Math.floor(pixelRatio));
    if (pixelRatio >= 2) {
        classNames.push('retina');
    }

    var html = document.getElementsByTagName('html')[0];

    classNames.forEach(function (className) {
        html.classList.add(className);
    });
}

这样一来我们可以通过, html.pixel-ratio-2 给不同分辨率的屏幕加上特殊的样式

单个边的1px方案

由于andorid不能设置0.5px像素的边框，所以需要通过伪元素来模拟边框，先使伪元素的高度为1px，然后使用transform: scale(.5)缩小相应的大小即可。具体实现代码如下：

.item {
    position: relative;
    &:before{
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: auto;
        right: auto;
        width: 1px;
        height: 100%;
         padding: 0px; color: green;">@color;
        display: block;
        z-index: 1;
        html.pixel-ratio-2 & {
          .transform(scaleX(0.5));
        }
        html.pixel-ratio-3 & {
          .transform(scaleX(0.33));
        }
    }
}

然后不同方向的边框，只需要跳转伪元素的位置和缩放位置即可。该实现方案来自Framework7

终极解决方案：

参考有赞的vant 解决方案: https://github.com/youzan/vant/blob/dev/packages/style/hairline.less

参考：

https://www.cnblogs.com/libin-1/p/6639310.html

https://www.w3cplus.com/css/fix-1px-for-retina.html