移动端1px-细线问题-less实现

采用缩放方案，单条边线好处理一点；如果需要四边都有边线，会有点麻烦，使用缩放方案，虽然可行，但是在部分设备上有间隙问题，建议放弃，或者使用 svg 来做 background-image。

示例代码（less）

/**
 * 1px 细线 - 上边线
 */
.border-top(@color) {
  position: relative;

  &:before {
    position: absolute;
    top: 0;
    left: 0;
    content: '\0020';
    width: 100%;
    height: 1px;
    border-top: 1px solid @color;
    transform-origin: 0 0;
    overflow: hidden;
  }

  @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49) {
    &:before {transform: scaleY(0.5);
    }
  }

  @media (-webkit-min-device-pixel-ratio: 2.5) {
    &:before {transform: scaleY(0.33333);
    }
  }
}