移动端常见九宫格布局

最新推荐文章于 2024-08-14 15:17:32 发布

飞歌Fly

最新推荐文章于 2024-08-14 15:17:32 发布

阅读量1.4k

点赞数 1

分类专栏： css样式

本文链接：https://blog.csdn.net/qq_35430000/article/details/102832317

版权

css样式专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种用于移动端网页布局的CSS技巧，通过使用scaleX和scaleY缩放属性，解决了1px线条在不同设备上显示过粗的问题。文章详细解释了如何通过调整缩放比例使线条在各种分辨率下保持一致的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <div class="grid">
      <ul class="item cf">
        <li class="liItem">
          <div>标题一</div>
        </li>
        <li class="liItem">
          <div>标题二</div>
        </li>
        <li class="liItem">
          <div>标题三</div>
        </li>
        <li class="liItem">
          <div>标题四</div>
        </li>
        <li class="liItem">
          <div>标题五</div>
        </li>
        <li class="liItem">
          <div>标题六</div>
        </li>
        <li class="liItem">
          <div>标题七</div>
        </li>
      </ul>
    </div>

css样式

值得注意的是 transform: scaleX(0.6);这样用是因为1px在移动端手机会显得比较粗，所以做了0.6缩放。

cf 类名为清除浮动的缩写，使用时需要把清除浮动代码加上。

    .grid{
    background:#fff;
    font-size:0.42rem;
    color:#333;
    .item{
      .liItem{
        float: left;
        width: 33.3333%;
        background: #fff;
        padding: .49rem 0;
        box-sizing: border-box;
        font-size: 0.42rem;
        color: #111;
        position: relative;
        // 3倍数的li没有右border
        &:not(:nth-child(3n))::before{
          content: '';
          position: absolute;
          width: 1px;
          height: 100%;
          top: -1px;
          right: 0;
          border-right: 1px solid rgba(232,232,232,0.8);
          transform: scaleX(0.6);
        }
        &::after{
          content: '';
          position: absolute;
          height: 1px;
          width: 100%;
          bottom: 0;
          left: 0;
          border-bottom: 1px solid rgba(232,232,232,0.8);
          transform: scaleY(0.6);
        }
      }
    }
  }