現(xiàn)在随著(zhe)移動端的(de)逐漸增大&§(dà)，自(zì)适應的(de)布局未來(láφ↓i)會(huì)成為(wèi)潮流，這(zhè)種設計(jì)同時(shí←☆↔φ)滿足了(le)：
1.根據用(yòng)戶窗(chuāng)口大(dà)小(xiǎo)的(de)不(bù)同做σ≠¥₩(zuò)出改變
2.在一(yī)定寬度範圍內(nèi)提供€φ∏£穩定的(de)視(shì)覺體(tǐ)驗

缺點則有(yǒu)對(duì)老(lǎo)舊(jiù)和(hé)非标準浏覽器(qì)的(↕≥&​de)兼容性較差，對(duì)産品定義和(hé)設計(jì)能(néng)力的(de)要(yào)∞ ↓求較高(gāo)，對(duì)頁面做(zuò)出調整時(shí)需要(y₹€ào)同時(shí)改變多(duō)種尺寸←☆®下(xià)的(de)布局
下(xià)面就(jiù)說(shuō)說(sh₩₩uō)自(zì)适應網頁設計(jì)的(de)方法：

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

　　在網站(zhàn)html文(wén)件(jiàn)的(de)開±δ©(kāi)頭，增加viewport meta标簽告訴浏覽器(qì)視(shì)口寬度等于設備屏↔∏₽幕寬度，且不(bù)進行(xíng)初始縮放(fàng)。代碼如(rú∏φ)下(xià)：

內(nèi)蒙古網站(zhàn)制(zhì)作(zuòβπγ )，內(nèi)蒙古網站(zhàn)設計(jì)，內(nèi)蒙古網站(zhà÷↔n)建設，呼和(hé)浩特網站(zhàn)建設，呼和(hé)浩特網站(zhà§÷n)制(zhì)、網站(zhàn)制(zhì)作(z β☆¶uò)、計(jì)首選內(nèi)蒙古呼和(→ § hé)浩特先誠網絡科(kē)技(jì)公司、、、先誠官網：/ 

　　<meta name="viewp↕∞ort" content="width=device- ‍width, initial-scale=1" /'φ>

　　這(zhè)段代碼支持Chrome、Firefox、IE9以上(shàng)的(de)浏覽器÷→(qì)，但(dàn)不(bù)支持IE8以及低(dī£±)于IE8的(de)浏覽器(qì)。

2、在css文(wén)件(jiàn)尾部增加針對(duì)不(↕β∑bù)同屏幕分(fēn)辨率的(de)規則。

　　例如(rú)使用(yòng)如(rú)下(xià)的(de)代碼∞$$∞，可(kě)以讓屏幕寬度低(dī)于480像素的(de♠γ≥)設備（如(rú)iPhone等），網頁側欄隐藏中α✘部內(nèi)容欄寬度自(zì)動調節。以下(xià)代碼針對(duì)Z-B$φγ≥log，WordPress相(xiàng)關标簽名稱隻需修改一(yī)下(xià)即☆γ♥可(kě)。

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

3、布局寬度使用(yòng)相(xiàng)對(duì)寬度。

　　網頁總體(tǐ)框架可(kě)以使用(yòng)絕對(duì)寬度，β♦£γ但(dàn)往下(xià)的(de)內(nèi)容框架、側欄等σ£✘φ最好(hǎo)使用(yòng)相(xiàng)對(duì)寬度，這(zhè)樣¶→∑€針對(duì)不(bù)同分(fēn)辨率進行(xíng>★)修改就(jiù)方便。當然也(yě)可(kě)以不(bù)用(yòng)相(xiàng)≠♦☆對(duì)寬度，那(nà)就(jiù)需要(yào)"λ在 @media screen and (max® -device-width: 480px) 裡(lǐ)面增加各個(gè)divδ←的(de)針對(duì)小(xiǎo)屏幕的(de)寬度，實際上(shàφ ≤ng)更麻煩。

4、頁面使用(yòng)相(xiàng)對(duì)字體(tǐ)

　　在HTML頁面上(shàng)不(bù)要(yào)使用≈★(yòng)絕對(duì)字體(tǐ)（px），而要₩×(yào)使用(yòng)相(xiàng)對(duì)字體(t&"≤ǐ)（em），兩者換算(suàn)關系是(shì)：em =§↓δ∑ px/16 ，例如(rú)16px就(jiù)等于1em。

　　根據上(shàng)面講述的(de)幾點內(nèi)容，我針對(duì)我博客的(d≈≤₩e)CSS進行(xíng)了(le)一(yī)些(xiē)修改，發現(xiàn)可(kěγα α)以從(cóng)iPhone手機(jī)浏覽到(dào)體←↓Ω(tǐ)驗更佳的(de)頁面，但(dàn)有(yǒu)一(yī)個(gè)問(wèΩ←n)題沒有(yǒu)解決，就(jiù)是(shì)頂部導航欄navbar顯示有(yǒγ←→u)問(wèn)題，換行(xíng)後被下(xi βà)面的(de)文(wén)章(zhāng)蓋住了(le)，不(×♠bù)知(zhī)道(dào)怎樣能(néng)更好(hπ∞ǎo)地(dì)解決這(zhè)個(gè)問(wèn)題。