美文网首页
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