Question

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

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

每个类别图标＆amp;专辑的缩略图在1行中，没有类别将显示超过4个缩略图

我的手机屏幕宽度为320px＆amp; 360px我只需将它显示为一个专辑

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

我的手机屏幕宽度为480px＆amp; 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/

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

Answer 2

这是一个带bootstrap的解决方案

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>

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

2 个答案: