响应式图像和列表

Question

尝试获取它,以便我将图像的最大宽度设置为308px,当浏览器缩放得更大时,列表每行将有更多项目.刚才它似乎停留在每行3个列表项,但如果我希望它完全响应,如果浏览器缩放到最小,那么它可以是每行一个图像.

HTML

<ul>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
    <li><img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"></li>
</ul>

CSS

ul{
    position:relative;
    float:left;
    width:100%;
    height:100%;
    margin:45px 0 0;
}
ul li{
    width: 33.3333%;
    float:left;
}
ul li img{
    display: block;
    height: auto;
    width: 100%;
}

的jsfiddle

Answer 1

您需要使用媒体查询.

只需为每个"断点"设置媒体查询并更改li宽度.

例如:

    /* Show one image on devices under 540px */
    @media screen and (max-width: 540px) { 
       ul li{
        width: 100%;
        float:left;
       }
    }

    /* Show three images on devices between 550 and 800px wide */  
    @media screen and (min-width: 540px) and (max-width: 800px) {
       ul li{
        width: 33.333%;
        float:left;
       }
    }

    /* Show five images on devices between 800px and 1180pxwide */  
    @media screen and (min-width: 800px) and (max-width: 1180px) {
       ul li{
        width: 20%;
        float:left;
       }
    }

http://jsfiddle.net/spacebeers/gfjDk/3/