網(wǎng)站怎么做到自適應(yīng)網(wǎng)頁？

時間: 2016-11-14 14:54:14 點(diǎn)擊數(shù): 30142 來源: 耐思智慧

自適應(yīng)網(wǎng)頁能根據(jù)屏幕自動調(diào)整頁面布局，基本適用于市面上所有終端，給企業(yè)帶來了很大的便利。對程序開發(fā)者來說，要把網(wǎng)站做成自適應(yīng)的其實(shí)也不難，修改幾項(xiàng)參數(shù)就可以了。

電腦網(wǎng)站

網(wǎng)頁總體架構(gòu)使用寬度，但內(nèi)容框架、側(cè)欄等最好使用相對寬度，這樣針對不同分辨率進(jìn)行修改就方便。在HTML頁面上不要使用字體（px），而要使用相對字體（em）。圖片若是img標(biāo)簽的話，只需要在CSS代碼中設(shè)置 max-width: 100%;或width:100%;不用固定數(shù)值。語句為：img { max-width: 98%; }。background-size:100% 100%;可以實(shí)現(xiàn)background-image的自適應(yīng)。

手機(jī)網(wǎng)站

在網(wǎng)頁頭部加上一條meta標(biāo)簽：<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 ：寬度等于設(shè)備屏幕的寬度。

initial-scale=1.0：初始的縮放比例100%。

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

maximum-scale=2.0：最大的縮放比例200%。

user-scalable=yes：用戶可以調(diào)整縮放比例。

對零基礎(chǔ)想做網(wǎng)站的用戶來說，上面的方法還是太復(fù)雜了，最基本的那些代碼是什么意思還沒搞清楚，更別說在龐大的網(wǎng)站程序中對某項(xiàng)細(xì)節(jié)進(jìn)行修改了。這時候想做自適應(yīng)網(wǎng)站，可以選擇成熟一點(diǎn)的自助建站工具。

筆者認(rèn)為比較適合零基礎(chǔ)站長的自助建站工具是建站寶盒，后臺有一千多套行業(yè)模板，全部由設(shè)計師精心設(shè)計，符合市場主流審美和商業(yè)需求。用戶一鍵安裝模板后，對網(wǎng)站內(nèi)容稍作修改就能上線網(wǎng)站，都是最簡單的選擇替換上傳操作。網(wǎng)站做好后就是響應(yīng)式的，直接復(fù)制網(wǎng)址到手機(jī)就能打開網(wǎng)站，適用于市面上所有屏幕。