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

Question

我有 4 张图片用于 wap 网站。在小屏幕上，我希望它是两行，每行两个图像。如果在像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 媒体查询？它们允许您根据用户屏幕的宽度定义不同的 CSS 样式等。