現在随著(zhe)移動端的逐漸增大，自适應的布局未來會成(chéng)爲潮流，這(zhè)種(zhǒng)設計同時滿足了：
1.根據用戶窗口大小的不同做出改變
2.在一定寬度範圍内提供穩定的視覺體驗

缺點則有對(duì)老舊和非标準浏覽器的兼容性較差，對(duì)産品定義和設計能(néng)力的要求較高，對(duì)頁面(miàn)做出調整時需要同時改變多種(zhǒng)尺寸下的布局
下面(miàn)就說說自适應網頁設計的方法：

1、在HTML頭部增加viewport标簽。

　　在網站html文件的開(kāi)頭，增加viewport meta标簽告訴浏覽器視口寬度等于設備屏幕寬度，且不進(jìn)行初始縮放。代碼如下：

内蒙古網站制作，内蒙古網站設計，内蒙古網站建設，呼和浩特網站建設，呼和浩特網站制、網站制作、計首選内蒙古呼和浩特先誠網絡科技公司、、、先誠官網：/ 

　　<meta name="viewport" content="width=device-width, initial-scale=1" />

　　這(zhè)段代碼支持Chrome、Firefox、IE9以上的浏覽器，但不支持IE8以及低于IE8的浏覽器。

2、在css文件尾部增加針對(duì)不同屏幕分辨率的規則。

　　例如使用如下的代碼，可以讓屏幕寬度低于480像素的設備（如iPhone等），網頁側欄隐藏中部内容欄寬度自動調節。以下代碼針對(duì)Z-Blog，WordPress相關标簽名稱隻需修改一下即可。

@media screen and (max-device-width: 480px) {
  #divMain{
  float: none;
  width:auto;
  }
  #divSidebar {
  display:none;
  }
}

3、布局寬度使用相對(duì)寬度。

　　網頁總體框架可以使用絕對(duì)寬度，但往下的内容框架、側欄等最好(hǎo)使用相對(duì)寬度，這(zhè)樣(yàng)針對(duì)不同分辨率進(jìn)行修改就方便。當然也可以不用相對(duì)寬度，那就需要在 @media screen and (max-device-width: 480px) 裡(lǐ)面(miàn)增加各個div的針對(duì)小屏幕的寬度，實際上更麻煩。

4、頁面(miàn)使用相對(duì)字體

　　在HTML頁面(miàn)上不要使用絕對(duì)字體（px），而要使用相對(duì)字體（em），兩(liǎng)者換算關系是：em = px/16 ，例如16px就等于1em。

　　根據上面(miàn)講述的幾點内容，我針對(duì)我博客的CSS進(jìn)行了一些修改，發(fā)現可以從iPhone手機浏覽到體驗更佳的頁面(miàn)，但有一個問題沒(méi)有解決，就是頂部導航欄navbar顯示有問題，換行後(hòu)被(bèi)下面(miàn)的文章蓋住了，不知道(dào)怎樣(yàng)能(néng)更好(hǎo)地解決這(zhè)個問題。