移动端1像素实现

最新推荐文章于 2023-08-25 10:00:25 发布

小太阳sunshine

最新推荐文章于 2023-08-25 10:00:25 发布

阅读量577

点赞数

分类专栏：前端技巧手机移动文章标签：前端技巧

本文链接：https://blog.csdn.net/zfangls/article/details/76662561

版权

前端技巧同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

手机移动

9 篇文章 0 订阅

订阅专栏

.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);
    }
  }