Javascript HTML-降低分辨率时显示的div数

你好，我遇到了这个问题，我正在为我的页面做响应性设计。我需要在屏幕的特定分辨率下限制显示div的数量。例如，我得到了一个包含10个div的表，我想限制超过480px时只显示其中的4个div

---

谢谢您的帮助。

您可以通过使用页面上的CSS媒体查询来确定显示哪些元素以及它们的显示方式

一个简单的例子：

@media (max-width: 480px) {
    /* *
     *  ".widerView" is appended to the 6 divs we 
     *   want to hide in narrower layouts.
     */
    div.widerView { 
        display: none;
    }
}

---

可以在MDN的“媒体查询”文档中找到更多信息：

一种方法是对您不喜欢在较小屏幕上显示的元素使用

display:none

，如下所示：

.mobile-hidden{ display: none }

@media screen and (min-width: 1200px){
    .mobile-hidden{ display: block}
}

HTML

<div class="mobile-hidden">Content</div>
<div class="tablet-hidden">Content</div>

但更好的态度可能是这样的：

.mobile-hidden{ display: none }

@media screen and (min-width: 1200px){
    .mobile-hidden{ display: block}
}

---

到目前为止你试过什么？你用什么来提高你的反应能力？独自创立Bootstrap有一些类可以以不同的分辨率隐藏元素。也许你应该看看到目前为止我还不知道怎么做，这就是为什么我问的原因。我想我会添加一个带有display:none的类到我想要隐藏的元素中。重复一次：“你用什么来提高响应能力？Boostrap？”如果你是自己做的，当分辨率下降并将其隐藏在低RZ样式中时，您需要对您希望隐藏的项目设置类。@ MITRE请考虑接受答案，以完成问答过程，并激励其他人回答您的问题。