自適應(ying)網頁能根據(ju)屏幕自動調整頁面(mian)布局，基本適用于市面(mian)上(shang)所有終端(duan)，給企業帶來了(le)很大(da)的(de)便利。對程序(xu)開(kai)發者來說，要把網站做成(cheng)自適應(ying)的(de)其實也不(bu)難，修改幾項(xiang)參數就(jiu)可以了(le)。

電腦網站

網頁總體架(jia)構使(shi)用寬度(du)(du)，但內容(rong)框架(jia)、側欄等最(zui)好使(shi)用相對(dui)寬度(du)(du)，這樣針(zhen)對(dui)不同分辨率(lv)進行(xing)修改就(jiu)方便。在HTML頁面上不要(yao)(yao)使(shi)用字(zi)體（px），而(er)要(yao)(yao)使(shi)用相對(dui)字(zi)體（em）。圖(tu)片若是img標簽的(de)話，只(zhi)需要(yao)(yao)在CSS代碼中設置 max-width: 100%;或width:100%;不用固(gu)定(ding)數值。 語句為：img { max-width: 98%; }。background-size:100% 100%;可以實現background-image的(de)自適應。

手機網(wang)站

在網頁頭部加上(shang)一條meta標簽：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

解釋：

width=device-width ：寬度等于設備屏幕的寬度。

initial-scale=1.0：初(chu)始(shi)的(de)縮放(fang)比例100%。

minimum-scale=0.5：最小的(de)縮放比例50%。

maximum-scale=2.0：最(zui)大(da)的(de)縮放(fang)比例200%。

user-scalable=yes：用戶可(ke)以(yi)調整縮放比例。

對零基礎想做網站的用戶來說，上面的方法還是太復雜了，最基本的那些代碼是什么意思還沒搞清楚，更別說在龐大的網站程序中對某項細節進行修改了。這時候想做自適應網站，可以選擇成熟一點的自助建站工具。

筆(bi)者認為比(bi)較適合零基礎站長(chang)的自助建站工具是建站寶盒，后(hou)臺有一(yi)千(qian)多套(tao)行業模(mo)板，全部由設計(ji)師精(jing)心設計(ji)，符合市(shi)場主(zhu)流審(shen)美(mei)和商(shang)業需求(qiu)。用戶一(yi)鍵安裝模(mo)板后(hou)，對(dui)網(wang)站(zhan)(zhan)內容稍作(zuo)修(xiu)改(gai)就(jiu)能上線(xian)網(wang)站(zhan)(zhan)，都是(shi)最(zui)簡(jian)單(dan)的選(xuan)擇替換上傳操作(zuo)。網(wang)站(zhan)(zhan)做好(hao)后(hou)就(jiu)是(shi)響應(ying)式的，直接復制(zhi)網(wang)址(zhi)到(dao)手(shou)機就(jiu)能打開網(wang)站(zhan)(zhan)，適用于(yu)市(shi)面上所有屏幕。

用自助建站工具做網站還有個好處就是：管理起來特別方便。電腦站、手機站、微信站都是一個后臺，網站只要一次更新就能三平臺同步，修改也是直接在后臺進行模塊拖拽，徹底告別繁瑣的代碼。推薦小白使用：//szjicheng.cn/design