css - 响应式 2 列到单列列表

Question

是否可以有一个默认情况下显示为两列的单个无序列表，但通过如下所示的媒体查询响应性地变回单列？

@media (max-width: 640px)

列表中元素的数量是未知的，我想避免使用多个列表(例如以编程方式插入标签)

Answer 1

是的，这是可能的。

默认设置 li 的 width 为 50% 和 float:left inside media query (min-width - 移动优先方法)

@media (min-width: 640px) {
  li {
    width: 50%;
    float: left
  }
}

<ul>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
</ul>

更新 - 你可以使用 flexbox 来实现这一点

@media (min-width: 640px) {
  ul {
    display: flex;
    flex-wrap: wrap;
  }
  li {
    width: 50%
  }
}

<ul>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
</ul>