移动端 1px 边框

方法 1：用 0.5px 解决

通过 js 检测浏览器能否处理 0.5px 的边框，如果可以就给元素添加个 class

缺点：无法兼容安卓设备以及 ios 8 以下设备

div {
    border: 1px solid #bbb;
}
.hairlines div {
    border-width: 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);
}

方法 2：用图片实现 border

准备一张 6*6 的图片，沿周围 1px 做边框颜色

缺点：更改边框颜色时需要改图片

.border {
    border-width: 1px;
    border-image: url(border.gif) 2 repeat;
}

方法 3：用多背景渐变实现

设置 1px 的渐变背景，50% 有颜色 50% 透明

缺点：多写不少代码，无法实现圆角

.border {
    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(0deg, 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;
}

方法 4：用 box-shadow 模拟边框

缺点：颜色不好处理，有阴影出现

.hairlines li {
    border: none;
    box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);
}

方法 5：通过 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 了

缺点：需要准备两套样式，要动态改变 viewport，有点费劲

方法 6：伪类 + transform

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

结合 js 代码，判断是否 retina 屏，支持圆角，小缺陷是 td 标签无法使用

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

单条 border

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

4 条 border

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

# 移动端 1px 边框

# 方法 1：用 0.5px 解决

# 方法 2：用图片实现 border

# 方法 3：用多背景渐变实现

# 方法 4：用 box-shadow 模拟边框

# 方法 5：通过 viewport + rem 实现