html - 責任ある画像をモバイルサイトの中央に揃えるには?

Question

wapサイト用の画像が4枚あります。小さな画面では、2行、1行に2つの画像が必要です。iPadのような大画面だと1行に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 スタイルを定義できます。