根据屏幕大小隐藏一系列 div 中的第 n 个 div答案

【问题标题】：Hide nth div's in a series of div based on screen size根据屏幕大小隐藏一系列 div 中的第 n 个 div
【发布时间】：2014-08-19 22:15:00
【问题描述】：

我有一个简单的照片库页面，根据类别显示不同的画廊。

Cat Name1 - Album1  Album 2 Album 3
Cat Name2 - Album1   
Cat Name2 - Album1  Album 2 Album 3
Cat Name4 - Album1  Album 2

专辑的每个类别图标和缩略图都在 1 行中，任何类别都不会显示超过 4 个缩略图

对于我的手机屏幕宽度 320 像素和 360 像素，我只需将其显示为一个相册

Cat Name1 - Album1  
Cat Name2 - Album1   
Cat Name2 - Album1
Cat Name4 - Album1

对于我的手机屏幕宽度 480 像素和 640 像素，我只需要将两个相册显示为

Cat Name1 - Album1  Album 2 
Cat Name2 - Album1   
Cat Name2 - Album1  Album 2 
Cat Name4 - Album1  Album 2

示例 HTML

<!-- Album Category -->
<div class="Album-Row-Wrapper"> <a href="file1.html">
        <div class="category-icon" ">
            <img src="http://placehold.it/40x150&text=A"  >
        </div>
    </a>

    <!-- Album Icon Images --> <a href="file2x?AlbumID=68&amp;">
        <div class="boxgrid"> 
            <img alt="Album One" src="http://placehold.it/150x150&text=1" >
        </div>
    </a>
 <a href="file2x?AlbumID=68&amp;">
        <div class="boxgrid"> 
            <img alt="Album One" src="http://placehold.it/150x150&text=2" >
        </div>
    </a>
    <a href="file2x?AlbumID=68&amp;">
        <div class="boxgrid"> 
            <img alt="Album One" src="http://placehold.it/150x150&text=3" >
        </div>
    </a>

    <!-- Repeater Child -->
</div>
<!-- Album Category -->
<!-- Album Category -->
<div class="Album-Row-Wrapper"> <a href="file1.html">
        <div class="category-icon" ">
           <img src="http://placehold.it/40x150&text=B"  >
        </div>
    </a>

    <!-- Album Icon Images --> <a href="file2x?AlbumID=69&amp;">
        <div class="boxgrid"> 
            <img alt="Album One" src="http://placehold.it/150x150&text=1" >
        </div>
    </a>

    <!-- Repeater Child -->
</div>
<!-- Album Category -->
<!-- Album Category -->
<div class="Album-Row-Wrapper"> <a href="file1.html">
        <div class="category-icon" ">
            <img src="http://placehold.it/40x150&text=C"  >
        </div>
    </a>

    <!-- Album Icon Images --> <a href="file2x?AlbumID=68&amp;">
        <div class="boxgrid"> 
            <img alt="Album One" src="http://placehold.it/150x150&text=1" >
        </div>
    </a>
 <a href="file2x?AlbumID=68&amp;">
        <div class="boxgrid"> 
            <img alt="Album One" src="http://placehold.it/150x150&text=2" >
        </div>
    </a>
    <a href="file2x?AlbumID=68&amp;">
        <div class="boxgrid"> 
            <img alt="Album One" src="http://placehold.it/150x150&text=3" >
        </div>
    </a>

    <!-- Repeater Child -->
</div>

我正在尝试使用 CSS 解决方案来实现这一点，但它无法正常工作

我想为每个类别隐藏专辑 2、3、4 的缩略图。

我不确定如何做到最好或使其与 css 一起使用。

JSFiddle 示例http://jsfiddle.net/fA2WE/1/

【问题讨论】：

你的 CSS 中有语法错误，nth-child 选择器错误：N 是 a 元素，所以选择器应该是 .Album-Row-Wrapper a:nth-child(2) .boxgrid。见固定小提琴：jsfiddle.net/fA2WE/2
半题外评论：为什么要隐藏移动设备的内容（专辑）？我建议您更改布局并在单独的行中显示所有专辑（行：1st Cat A、2nd Album I、3rd Album II、4th Cat B、5th：Album I ...）。

标签： jquery html css responsive-design

【解决方案1】：

您可以使用 css 媒体查询来实现：

例如：

/* Desktop */
@media all and (max-width: 959px) {

    #album1, #album2 {display:block;}
    #album3, #album4 {display:none;}
}

/* Tablet */  
@media all and (max-width: 720px) {

    ...

}

/* Mobile */  
@media all and (max-width: 479px) {

    #album1, #album2 {display:none;}
    #album3, #album4 {display:block;}

}

更多关于媒体查询和处理屏幕尺寸的信息：http://css-tricks.com/css-media-queries/

【讨论】：

【解决方案2】：

这是一个使用引导程序的解决方案

http://jsfiddle.net/Kta7s/1/

@media (max-width: 640px) {
    .medium {
        display:none;
    }
}
@media (max-width: 320px) {
    .small {
        display:none;
    }
}
<div class="row">
  <div class="col-xs-2">Cat1</div>
  <div class="col-xs-2">A1</div>
  <div class="col-xs-2 small">A2</div>
  <div class="col-xs-2 medium">A3</div>
  <div class="col-xs-2 medium">A4</div>
</div>

【讨论】：