jquery - 根据屏幕尺寸在一系列div中隐藏第n个div

我有一个简单的相册页面，该页面根据类别显示不同的画廊。

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

对于我的移动屏幕宽度480px和640px，我只需要将其显示为两个相册即可

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媒体查询来实现：

例如：

/* 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/