Question

您好我的问题即时为我的页面制作响应式设计。我需要在屏幕的某个分辨率下限制显示的DIV的数量。例如，我得到的表包含10个DIV，我想限制过去480px，只会显示其中4个DIV。

感谢您的帮助。

Answer 1

您可以在网页上使用 CSS媒体查询来确定显示的元素及其显示方式。

一个简单的例子：

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

可以在MDN的“媒体查询”文档中找到更多信息：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Answer 2

一种方法是在您不喜欢在较小屏幕尺寸上显示的元素上使用display: none，如下所示：

<强> HTML

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

<强> CSS

@media screen and (max-width: 600px){
    .mobile-hidden{ display: none }
}

@media screen and (min-width: 600px) and (max-width: 1200px){
    .tablet-hidden{ display: none }
}

但更好的态度可能是Mobile-First这样的东西：

.mobile-hidden{ display: none }

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

HTML - 在较低分辨率下减少显示的DIV数量

2 个答案: