如何使用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根據屏幕寬度更改顯示的項目數量？

回答

相關問題