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

       網站自適應比較難處理的是圖片，一般圖片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>

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

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