現在自(zi)適(shi)應(ying)網(wang)站(zhan)可謂是炙手可熱，跟響應(ying)式(shi)網(wang)站(zhan)一樣(yang)備受企業(ye)或個(ge)人(ren)建站(zhan)的青睞。自(zi)適(shi)應(ying)網(wang)站(zhan)怎(zen)么做呢？一方面自(zi)適(shi)應(ying)網(wang)站(zhan)的制(zhi)作可以(yi)手寫編程代(dai)碼(ma)進(jin)行制(zhi)作。此外還(huan)可以(yi)直(zhi)接運用自適應網站模板直接制作，運用自助建站系統搭建，不需要懂代碼，即可以快速制作一個自適應網(wang)站(zhan)。在這(zhe)里小(xiao)編先給大家介紹(shao)一下利用編程(cheng)的方式制作自適應網(wang)站(zhan)。

1、在HTML頭部增加viewport標簽

在網站HTML文件的(de)開頭，增加(jia)viewport meta標簽(qian)告訴瀏覽器視口(kou)寬(kuan)度等于設備屏幕寬(kuan)度，且不(bu)進行初(chu)始縮放。代碼如下：

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

這段(duan)代碼支(zhi)(zhi)持Chrome、Firefox、IE9以(yi)上的瀏覽(lan)器(qi)(qi)，但不支(zhi)(zhi)持IE8以(yi)及低于IE8的瀏覽(lan)器(qi)(qi)。

2、在CSS文件尾部增加針對不同屏幕分辨率的規則

例如(ru)使用如(ru)下(xia)的代(dai)碼(ma)，可以讓屏幕寬度低于480像(xiang)素(su)的設備(bei)（如(ru)iPhone等(deng)），網(wang)頁側欄隱藏中(zhong)部內(nei)容欄寬度自動(dong)調節(jie)。以下(xia)代(dai)碼(ma)針對Z-Blog，WordPress相關標簽(qian)名(ming)稱只需修(xiu)改一下(xia)即可。

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

3、布局寬度使用相對寬度

網頁總(zong)體框(kuang)(kuang)架可(ke)以使用絕對(dui)(dui)寬(kuan)度(du)，但往下(xia)的(de)(de)內容框(kuang)(kuang)架、側欄等(deng)最好使用相(xiang)對(dui)(dui)寬(kuan)度(du)，這樣針對(dui)(dui)不同分辨率(lv)進行修改就(jiu)方便。當然也可(ke)以不用相(xiang)對(dui)(dui)寬(kuan)度(du)，那就(jiu)需要在 @media screen and (max-device-width: 480px) 里面增加各個div的(de)(de)針對(dui)(dui)小屏幕的(de)(de)寬(kuan)度(du)，實際上(shang)更(geng)麻煩。

4、頁面使用相對字體（非必要）

在(zai)HTML頁面(mian)上不要(yao)使用絕(jue)對(dui)字體（px），而要(yao)使用相對(dui)字體（em），對(dui)于大(da)多數瀏覽(lan)器來說，通常(chang)用 em = px/16 換(huan)算，例如16px就等于1em。

5、圖片自適應（非必要）

img標簽的話，只需要(yao)設(she)置 max-width: 100%;或width:100%; 語句為：img { max-width: 98%; }

css加載的(de)background-image如何自適應大(da)小呢，其實CSS3中(zhong)是(shi)可以實現的(de)，添加如下語句：background-size:100% 100%;

其實，現在企業想要搭建一個自適應網站不用那么麻煩，直接借助自助建站系統就可以快速完成網站的搭建，這個大家可以了解一下建站寶盒，不需要懂代碼，快速搭建一個自適應網站，節省企業建站的時間與成本。

建站寶盒詳情：//szjicheng.cn/design/?s=lhp