自適應(yīng)網(wǎng)頁是什么意思？自適應(yīng)網(wǎng)頁的概念就是指一個(gè)網(wǎng)頁能夠在手機(jī)上正常顯示，也能夠適應(yīng)在另外一種設(shè)備上，你維護(hù)的是同一個(gè)網(wǎng)頁代碼，但是可以讓網(wǎng)站在不同的瀏覽設(shè)備上擁有更好更優(yōu)秀的閱讀體驗(yàn)。那么究竟怎樣做一個(gè)優(yōu)秀的自適應(yīng)網(wǎng)頁呢？

第一、在HTML頭部增加viewport標(biāo)簽
每個(gè)網(wǎng)站都有HTML文件開頭，只要簡(jiǎn)單的在開頭的地方增加viewport meta標(biāo)簽，就能夠讓瀏覽器的頁面尺寸與設(shè)備的尺寸相適應(yīng)，并且不需要進(jìn)行累死初始縮放之類的。要增加這一行代碼：<meta name="viewport" content="width=device-width, initial-scale=1"/>
Chrome、Firefox、IE9以上的瀏覽器都能夠顯示出這段代碼，但是IE8以及低于IE8瀏覽器就不能識(shí)別這段代碼了。

第二、在CSS文件尾部增加針對(duì)不同屏幕分辨率的規(guī)則
想讓屏幕寬度低于480像素來適應(yīng)設(shè)備（如安卓等），只要在網(wǎng)頁的側(cè)欄上的隱藏中部?jī)?nèi)容中設(shè)置一下欄寬度自動(dòng)調(diào)節(jié)。有專門的代碼針對(duì)Z-Blog的，只需要稍微修改一下WordPress相關(guān)標(biāo)簽的名稱就可以做到自己想要的效果了。

第三、布局寬度使用相對(duì)寬度
絕對(duì)寬度可以幫助你實(shí)現(xiàn)這個(gè)目標(biāo)，對(duì)于網(wǎng)頁總體框架你可以使用絕對(duì)寬度，但是之后的內(nèi)容，絕對(duì)寬度就不能幫上什么忙了，這時(shí)候就要用相對(duì)寬度來解決。這樣一來，即使分辨率不同，只要相應(yīng)進(jìn)行修改就可以了，非常方便。如果你不想要用相對(duì)寬度，那就要在@media screen and (max-device-width: 480px)中增加各個(gè)div的相對(duì)寬度。更加麻煩。

第四、頁面使用相對(duì)字體
這一步不是必須的，不過還是提一提。在HTML頁面中，最好不要使用絕對(duì)字體，而要使用相對(duì)字體。這個(gè)跟大多數(shù)瀏覽器的性質(zhì)有關(guān)，通常用 em = px/16 換算，例如16px就等于1em。

第五：圖片自適應(yīng)
對(duì)于img標(biāo)簽來說，，只需要設(shè)置標(biāo)簽的最大寬度為100%或?qū)挾葹?00%。
那么用css加載的背景圖片標(biāo)簽如何自適應(yīng)呢？不要忘了，CSS3是可以實(shí)現(xiàn)這些功能的，只需要添加如下語句：background-size:100% 100%就可以輕松的完成了。
自適應(yīng)網(wǎng)頁其實(shí)很簡(jiǎn)單，很多東西只要稍微變通一下就可以做到自適應(yīng)了。根據(jù)上面的內(nèi)容，可以大膽的進(jìn)行你的網(wǎng)頁自適應(yīng)設(shè)計(jì)了。做出一個(gè)完美的自適網(wǎng)站還需要很大的努力。只要稍微做一下修改，從你的手機(jī)設(shè)備上卻可以感受到更加舒適的頁面。更多的網(wǎng)頁自適應(yīng)代碼，可以通過更多的渠道去學(xué)習(xí)，網(wǎng)頁自適應(yīng)對(duì)于大多數(shù)人來說都非常重要。

總之，只要踏踏實(shí)實(shí)的根據(jù)上面的五步進(jìn)行修改，有耐心一點(diǎn)，一定可以很簡(jiǎn)單地把一個(gè)網(wǎng)站修改成為適應(yīng)更多的設(shè)備瀏覽的頁面。現(xiàn)在手機(jī)用戶相對(duì)電腦用戶越來越多了，如果能夠做出自適應(yīng)網(wǎng)站，那對(duì)于網(wǎng)站本身來說是一件可喜可賀的事情，用戶體驗(yàn)上去了，網(wǎng)站的瀏覽量也就上去了。