Css 响应图像和列表

尝试获得它，这样我就有了一个最大宽度为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>

---

您需要使用媒体查询

只需为每个“断点”设置媒体查询并更改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;
       }
    }

---

您需要使用媒体查询

只需为每个“断点”设置媒体查询并更改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;
       }
    }

使用媒体查询（根据SpaceBeers的建议）并在列表项上使用最小宽度属性。。。

使用媒体查询（根据SpaceBeers的建议）并在列表项上使用最小宽度属性。。。

---

另一个想法是使用

显示：内联块

代替

float:left

并设置

最大宽度：308px和<编码>最小宽度：100px用于列表项

HTML：

<ul>
    <li><img src="image.jpg"></li><!--
    --><li><img src="image.jpg"></li><!-- as many more list items as you need
    -->
</ul>

ul {
    padding: 0;
    margin: 45px 0 0;
}
ul li{
    min-width: 100px;
    width: 33.3333%;
    max-width: 308px; 
    display: inline-block;
}
ul li img{
    display: block;
    height: auto;
    width: 100%;
}

另一个想法是使用
display:inline块
代替
float:left
并设置
最大宽度：308px和<编码>最小宽度：100px用于列表项

HTML：

<ul>
    <li><img src="image.jpg"></li><!--
    --><li><img src="image.jpg"></li><!-- as many more list items as you need
    -->
</ul>

ul {
    padding: 0;
    margin: 45px 0 0;
}
ul li{
    min-width: 100px;
    width: 33.3333%;
    max-width: 308px; 
    display: inline-block;
}
ul li img{
    display: block;
    height: auto;
    width: 100%;
}

选择了媒体查询方法。现在我的图片缩放得很好！谢谢选择了媒体查询方法。现在我的图片缩放得很好！谢谢