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

-3

是否有一种技术可以在大屏幕上显示所有li元素，并且只需使用css3减少移动视图上的数量？这是我想要实现的生动示例link。我想在普通视图（大屏幕）中显示所有元素，并减少小屏幕显示列表项的数量。如何使用CSS根据屏幕宽度更改显示的项目数量？

我做了两个分离的列表，一个用于大屏幕，另一个用于移动。我将使用@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来做到这一点吗？

来源

2015-12-11 rafr3

预计您至少会尝试为自己编写代码。堆栈溢出不是代码写入服务。我建议你做一些额外的研究，无论是通过谷歌或通过搜索，做一个尝试和。如果您仍然遇到麻烦，请返回**您的代码**并解释您尝试过的以及为什么它不起作用。 –

这个问题要么过于宽泛，要么基于观点，要么需要讨论，所以堆栈溢出是无关紧要的。如果您有特定的，可回答的编程问题，请提供完整的详细信息。 –

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

看看这个的详细信息，媒体查询：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

一旦你尝试了一些东西，它不工作了，你可以回来给我们你的烦恼。

快乐编码！

来源

2015-12-11 10:38:10

谢谢，@ victoria-s我知道如何使用@ media'查询。换句话说，这里是描述我的问题的[链接]（https://jsfiddle.net/rk87k9gb/1/embedded/result/）。我知道如何使用@media查询，但我不知道如何在**小屏幕**上显示一个'li'。我应该为所有不是“：first-child”的设置设置“display：none”吗？ – rafr3

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

回答

相关问题