移动端1像素实现

.bor-bottom{
    position: relative;
    border-top: none !important;
  }

  .bor-bottom::after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #e4e4e4;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
    .bor-bottom::after {
      -webkit-transform: scaleY(0.7);
      transform: scaleY(0.7);
    }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    .bor-bottom::after {
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2.5) {
    .bor-bottom::after {
      -webkit-transform: scaleY(0.33333334);
      transform: scaleY(0.33333334);
    }
  }
  /* 3倍屏 */
  @media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
    .bor-bottom::after {
      -webkit-transform: scaleY(0.33);
      transform: scaleY(0.33);
    }
  }

你可能感兴趣的:(前端技巧,手机移动)