PC和WAP端自適應(yīng)布局對用戶體驗(yàn)非常好，由于兩個(gè)平臺的URL只有一個(gè)，不存在權(quán)重分散的情況。設(shè)計(jì)起來表面復(fù)雜，其實(shí)比設(shè)計(jì)兩個(gè)不同的模板更簡單些，風(fēng)格一般簡潔大氣。如果兩個(gè)樣式差異太大，還是應(yīng)該選擇分開設(shè)計(jì)。

       網(wǎng)站自適應(yīng)比較難處理的是圖片，一般圖片CSS用百分比來控制，比如

<ul class="imgbox">
 <li><a href='#'><img src="http://www.vi586.com/images/1.jpg"></a></li>
 <li><a href='#'><img src="http://www.vi586.com/images/2.jpg"></a></li>
</ul>

css樣式選擇器寫法

@media screen and (判斷屬性){
css樣式
}

      不過多解釋， 看案例：

<style>
/*屏幕（瀏覽器）不小于1201px的樣式*/
@media screen and (min-width:1201px){
.imgbox li{float:left;width:50%;height:auto}
}
/*屏幕（瀏覽器）不大于1200px的樣式*/
@media screen and (max-width:1200px){
.imgbox li{float:none;width:100%;height:auto}
}
</style>

       以適應(yīng)不同的設(shè)備訪問，但寬度和高度都變自適應(yīng)后，如果每張圖片寬高不一樣，排版就會出現(xiàn)錯(cuò)亂，一般以最高的那張圖為下一張圖的起點(diǎn)，出現(xiàn)空白。只能通過JS控制高度。比如高度等于寬度：先引用jquery，自己下一個(gè)。在</head>或</body>前添加代碼

<script type="text/javascript">$(document).ready(function(){$('.imgbox img').css('height',$('.imgbox img').css('width'));})</script>