如何根据屏幕宽度使用CSS更改显示项目的数量？

Question

是否有一种技术可以在大屏幕上显示所有li元素，并使用css3减少移动视图中的数量？这是我想要实现的实例link。我想在普通视图（大屏幕）中显示所有元素，并减少较小屏幕显示列表项的数量。

我制作了两个单独的列表，一个用于大屏幕，第二个用于移动。我将使用@media个查询来显示其中一个，并根据屏幕大小隐藏第二个 是否可以仅使用一个ul列表来保持相同的效果？

<ul class="large-screen">
  <li>...<li>
  <li>...<li>
  <li>...<li>
  <!-- more li -->
</ul>
<ul class="small-screen">
  <li>...<li>
  <!-- less/just few li -->
</ul>

使用css是更好的方法吗？

Answer 1

在我看来，最好的方法是使用媒体查询。您只需要一个列表（不是两个单独的列表）并在媒体查询下定义布局。

有关媒体查询的更多信息，请查看此内容：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

一旦你尝试了一些事情并且没有成功，你可以带着麻烦回到我们身边。

快乐的编码！