如何在移动网站中使负责任的图像对齐中心？

Question

我为wap网站提供了4张图片。 在小屏幕中，我希望它是两行，每行两个图像。 如果在大屏幕上喜欢ipad，那么它将成为4行图像的一行。 并且还在页面中对齐中心，它怎么可能？

这是我的html部分：

<div class="fo3">
    <ul>
        <li><img src="img/pic1.jpg" width="100%" /></li>
        <li><img src="img/pic2.jpg" width="100%" /></li>
        <li><img src="img/pic3.jpg" width="100%" /></li>
        <li><img src="img/pic4.jpg" width="100%" /></li>
    </ul>
    <div class="clear"></div>
</div>

这是css部分：

.fo3{
    padding:0 10%;
    max-width:80%;
}

.fo3 ul{
    position:absolute;
    left:50%;
}

.fo3 ul li{
    float:left;
    width:50%;
    max-width:268px;
    display:inline;
}

.fo3 ul li img{
    display:block;
}

Answer 1

也许您想查看css media queries？它们允许您根据用户屏幕的width定义不同的CSS样式。