移动端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);
    }
  }
}
    原文作者:Eleven
    原文地址: https://segmentfault.com/a/1190000020238133
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞