不同页面宽度下的Div响应式布局实现咨询：是否需用两组UL-LI？

你只用**一个包含6个<li>的<ul>**就能轻松实现这个响应式布局，这样代码更精简，后续维护也更省心。下面给你两种实用的实现思路：

方法一：Flexbox + 媒体查询 #

如果小屏场景只需要显示前2个列表项，大屏展示全部6个并按指定样式排列，代码可以这么写：

HTML 结构 #

<ul class="responsive-list">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
  <li>项目4</li>
  <li>项目5</li>
  <li>项目6</li>
</ul>

CSS 样式 #

/* 小屏默认样式（宽度≤600px） */
.responsive-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 8px;
}

/* 小屏隐藏第3到第6个列表项 */
.responsive-list li:nth-child(n+3) {
  display: none;
}

/* 大屏样式（宽度>600px） */
@media (min-width: 601px) {
  .responsive-list {
    /* 这里可以根据你的需求调整布局，比如3列2行的网格 */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  /* 大屏显示所有列表项 */
  .responsive-list li:nth-child(n+3) {
    display: block;
  }
}

方法二：CSS Grid 实现复杂布局 #

如果大屏的布局是更灵活的网格结构（比如某些列表项占多格），用Grid会更顺手：

@media (min-width: 601px) {
  .responsive-list {
    display: grid;
    grid-template-areas: 
      "item1 item2 item3"
      "item4 item5 item6";
    gap: 15px;
  }

  /* 给每个列表项指定网格位置 */
  .responsive-list li:nth-child(1) { grid-area: item1; }
  .responsive-list li:nth-child(2) { grid-area: item2; }
  .responsive-list li:nth-child(3) { grid-area: item3; }
  .responsive-list li:nth-child(4) { grid-area: item4; }
  .responsive-list li:nth-child(5) { grid-area: item5; }
  .responsive-list li:nth-child(6) { grid-area: item6; }
}

为什么不推荐用两个<ul>？ #

• 冗余代码：重复的DOM元素会增加页面加载负担，后续修改内容时还要同步改两处，容易出错
• 可访问性问题：屏幕阅读器可能会读取重复的列表内容，影响视障用户体验
• 维护成本高：需求变更时需要同时调整两个列表的样式和内容，效率很低

总之，只用一组列表元素配合CSS媒体查询，就能完美实现你要的响应式切换效果啦！

内容的提问来源于stack exchange，提问作者Mauro Destro