自適應(yīng)網(wǎng)頁設(shè)計的概念和方法

本文格式為Word版，下載可任意編輯——自適應(yīng)網(wǎng)頁設(shè)計的概念和方法自適應(yīng)網(wǎng)頁設(shè)計的概念和方法

隨著無線網(wǎng)絡(luò)的普及，越來越多的人使用手機(jī)上網(wǎng)。移動設(shè)備正超過桌面設(shè)備，成為訪問互聯(lián)網(wǎng)的最常見終端。于是，網(wǎng)頁設(shè)計師不得不面對一個難題：如何才能在不同大小的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁?本文將為大家介紹適應(yīng)網(wǎng)頁設(shè)計的概念和方法，接待閱讀!

1、在HTML頭部增加viewport標(biāo)簽。

在網(wǎng)站HTML文件的開頭，增加viewportmeta標(biāo)簽報告欣賞器視口寬度等于設(shè)備屏幕寬度，且不舉行初始縮放。代碼如下：

這段代碼支持Chrome、Firefox、IE9以上的欣賞器，但不支持IE8以及低于IE8的欣賞器。

2、在CSS文件尾部增加針對不同屏幕辨識率的規(guī)矩。

例如使用如下的代碼，可以讓屏幕寬度低于480像素的設(shè)備如iPhone等，網(wǎng)頁側(cè)欄暗藏中部內(nèi)容欄寬度自動調(diào)理。以下代碼針對Z-Blog，WordPress相關(guān)標(biāo)簽名稱只需修改一下即可。

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

網(wǎng)頁總體框架可以使用十足寬度，但往下的內(nèi)容框架、側(cè)欄等最好使用相對寬度，這樣針對不同辨識率舉行修改就便當(dāng)。當(dāng)然也可以不用相對寬度，那就需要在@mediascreenandmax-device-width:480px里面增加各個p的針對小屏幕的寬度，實(shí)際上更麻煩。

4、頁面使用相對字體

在HTML頁面上不要使用十足字體px，而要使用相對字體em，對于大多數(shù)欣賞器來說，通常用em=px/16換算，例如16px就等于1em。

根據(jù)上面陳述的幾點(diǎn)內(nèi)容，我針對我博客的CSS舉行了一些修改，察覺可以從iPhone手機(jī)欣賞到體驗(yàn)更佳的頁面，但有一個問題沒有解決，就是頂部導(dǎo)航欄navbar顯示有問題，換行后被下面的文章蓋住了，不知道怎樣能更好地解決這個問題更新：經(jīng)過網(wǎng)友提示，在導(dǎo)航欄pNavbar的樣式里，參與overflow:hidden;一行即可解決這個問題。

相關(guān)閱讀》》自適應(yīng)網(wǎng)頁的特點(diǎn)

一、自適應(yīng)網(wǎng)頁設(shè)計的概念

2022年，EthanMarcotte提出了自適應(yīng)網(wǎng)頁設(shè)計ResponsiveWebDesign這個名詞，指可以自動識別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計。他制作了一個范例，里面是《福爾摩斯歷險記》六個仆人公的頭像。假設(shè)屏幕寬度大于1300像素，那么6張圖片并排在一行。假設(shè)屏幕寬度在600像素到1300像素之間，那么6張圖片分成兩行。假設(shè)屏幕寬度在400像素以下，那么6張圖片分成三行。mediaqueri.es上面有更多這樣的例子。這里還有一個測試小工具，可以在一張網(wǎng)頁上，同時顯示不同辨識率屏幕的測試效果，我推舉安裝。

二、自適應(yīng)網(wǎng)頁設(shè)計的特點(diǎn)

1、允許網(wǎng)頁寬度自動調(diào)整

2、不使用十足寬度

3、相對大小的字體

4、滾動布局fluidgrid

5、選擇加載CSS

6、CSS的@media規(guī)矩

為什么要使用自適應(yīng)網(wǎng)頁設(shè)計?

我們推舉使用自適應(yīng)網(wǎng)頁設(shè)計是由于它有大量優(yōu)勢：

使用單一網(wǎng)址，可讓用戶更輕松地共享并鏈接到您的內(nèi)容。

有助于Google的'算法為網(wǎng)頁切實(shí)地調(diào)配索引屬性，無需說明存在對應(yīng)的桌面版/移動設(shè)備版網(wǎng)頁。

需要較少的工程人力資源投入即可維護(hù)包含一致內(nèi)容的多個網(wǎng)頁。

降低了展現(xiàn)影響移動網(wǎng)站的常見錯誤的可能性。

無需重定向即可使用戶獲得已針對設(shè)備舉行優(yōu)化的視圖，從而縮短加載時間。此外，基于用戶代理的重定向不僅輕易出錯，而且會使網(wǎng)站的用戶體驗(yàn)大打折扣有關(guān)詳情，請參見"檢測用戶代理時的常見問題'片面。

在Googlebot抓取您的網(wǎng)站時可節(jié)省資源。對于采用自適應(yīng)網(wǎng)頁設(shè)計的網(wǎng)頁，一個Googlebot用戶代理只需抓取您的網(wǎng)頁一次而不是像使用不同的