美文网首页
h5上1px线兼容解决方案

h5上1px线兼容解决方案

作者: 皮皮06 | 来源:发表于2021-05-30 16:19 被阅读0次

html

<div class="line">
  <div class="border-1px">
  </div>
</div>

css

.line{
  position: relative;
  width: 100%;
  height: 1px;
  .border-1px:after {
    position: absolute;
    content: "";
    width: 200%;
    height: 200%;
    top: 0;
    left: 0;
    -webkit-transform-origin: top left;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    border-top: 1px solid #EEEEEE;
    z-index: 9999999999999999;
  }
  /* 2倍屏 */
  @media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
      .border-1px:after {
          -webkit-transform: scale(0.5);
          transform: scale(0.5);
      }
  }
  /* 3倍屏 */
  @media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
      .border-1px:after {
          -webkit-transform: scale(0.33);
          transform: scale(0.33);
      }
  }
}

相关文章

网友评论

      本文标题:h5上1px线兼容解决方案

      本文链接:https://www.haomeiwen.com/subject/vvfmsltx.html