hairline细边框方案

判断是否支持

//1px兼容处理，判断当前系统能否渲染出0.5px
;(function (window) {
    var docEl = window.document;
    var bodyEl = docEl.getElementsByTagName('body')[0];

    if (window.devicePixelRatio && window.devicePixelRatio >= 2) {
        var testEl = docEl.createElement('div');
        testEl.style.border = '.5px solid transparent';
        bodyEl.appendChild(testEl);
        if (testEl.offsetHeight === 1) {
            bodyEl.classList.add('hairline');
        }
        bodyEl.removeChild(testEl);
    }
})(window);

方案一、简单粗暴的方式

给全部元素预设置边框宽度

防止ios有的机型0.5px不显示，或者圆角时候有缺口，设置为0.75

      .hairline  *, .hairline  *:before, .hairline *:after {
          border-width: 0.75PX !important;
          border-bottom-width: 0.75PX !important;
          border-top-width: 0.75PX !important;
          border-left-width: 0.75PX !important;
          border-right-width: 0.75PX !important;
      }

方案二、添加全局css

    .hairline {
        .lineTop {
            border-top-width: 0.75px !important;
        }
        .lineLeft {
            border-left-width: 0.75px !important;
        }
        .lineRight {
            border-left-width: 0.75px !important;
        }
        .lineBottom {
            border-left-width: 0.75px !important;
        }
    }

html中使用

给用到边框的元素加上class名称

<div class="lineTop lineBottom" style="border-top: 1px solid red;border-bottom: 1px solid red;"></div>