如何使移動網站中的負責任的圖像對齊中心？

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樣式。