- 相關(guān)推薦
自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的概念和方法
隨著無(wú)線網(wǎng)絡(luò)的普及，越來(lái)越多的人使用手機(jī)上網(wǎng)。移動(dòng)設(shè)備正超過(guò)桌面設(shè)備，成為訪問(wèn)互聯(lián)網(wǎng)的最常見(jiàn)終端。于是，網(wǎng)頁(yè)設(shè)計(jì)師不得不面對(duì)一個(gè)難題：如何才能在不同大小的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁(yè)?本文將為大家介紹適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的概念和方法，歡迎閱讀!
1、在HTML頭部增加viewport標(biāo)簽。
在網(wǎng)站HTML文件的開(kāi)頭，增加viewport meta標(biāo)簽告訴瀏覽器視口寬度等于設(shè)備屏幕寬度，且不進(jìn)行初始縮放。代碼如下：
這段代碼支持Chrome、Firefox、IE9以上的瀏覽器，但不支持IE8以及低于IE8的瀏覽器。
2、在CSS文件尾部增加針對(duì)不同屏幕分辨率的規(guī)則。
例如使用如下的代碼，可以讓屏幕寬度低于480像素的設(shè)備(如iPhone等)，網(wǎng)頁(yè)側(cè)欄隱藏中部?jī)?nèi)容欄寬度自動(dòng)調(diào)節(jié)。以下代碼針對(duì)Z-Blog，WordPress相關(guān)標(biāo)簽名稱只需修改一下即可。
3、布局寬度使用相對(duì)寬度。
網(wǎng)頁(yè)總體框架可以使用絕對(duì)寬度，但往下的內(nèi)容框架、側(cè)欄等最好使用相對(duì)寬度，這樣針對(duì)不同分辨率進(jìn)行修改就方便。當(dāng)然也可以不用相對(duì)寬度，那就需要在 @media screen and (max-device-width: 480px) 里面增加各個(gè)div的針對(duì)小屏幕的寬度，實(shí)際上更麻煩。
4、頁(yè)面使用相對(duì)字體
在HTML頁(yè)面上不要使用絕對(duì)字體(px)，而要使用相對(duì)字體(em)，對(duì)于大多數(shù)瀏覽器來(lái)說(shuō)，通常用 em = px/16 換算，例如16px就等于1em。
根據(jù)上面講述的幾點(diǎn)內(nèi)容，我針對(duì)我博客的CSS進(jìn)行了一些修改，發(fā)現(xiàn)可以從iPhone手機(jī)瀏覽到體驗(yàn)更佳的頁(yè)面，但有一個(gè)問(wèn)題沒(méi)有解決，就是頂部導(dǎo)航欄navbar顯示有問(wèn)題，換行后被下面的文章蓋住了，不知道怎樣能更好地解決這個(gè)問(wèn)題(更新：經(jīng)過(guò)網(wǎng)友提示，在導(dǎo)航欄divNavbar的樣式里，加入 overflow:hidden; 一行即可解決這個(gè)問(wèn)題)。
相關(guān)閱讀》》自適應(yīng)網(wǎng)頁(yè)的特點(diǎn)
一、"自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)"的概念
2010年，Ethan Marcotte提出了"自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)"(Responsive Web Design)這個(gè)名詞，指可以自動(dòng)識(shí)別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁(yè)設(shè)計(jì)。他制作了一個(gè)范例，里面是《福爾摩斯歷險(xiǎn)記》六個(gè)主人公的頭像。如果屏幕寬度大于1300像素，則6張圖片并排在一行。如果屏幕寬度在600像素到1300像素之間，則6張圖片分成兩行。如果屏幕寬度在400像素以下，則6張圖片分成三行。mediaqueri.es上面有更多這樣的例子。這里還有一個(gè)測(cè)試小工具，可以在一張網(wǎng)頁(yè)上，同時(shí)顯示不同分辨率屏幕的測(cè)試效果，我推薦安裝。
二、自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的特點(diǎn)
1、允許網(wǎng)頁(yè)寬度自動(dòng)調(diào)整
2、不使用絕對(duì)寬度
3、相對(duì)大小的字體
4、流動(dòng)布局(fluid grid)
5、選擇加載CSS
6、CSS的@media規(guī)則
為什么要使用自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)?
我們推薦使用自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)是因?yàn)樗性S多優(yōu)勢(shì)：
使用單一網(wǎng)址，可讓用戶更輕松地分享并鏈接到您的內(nèi)容。
有助于 Google 的算法為網(wǎng)頁(yè)準(zhǔn)確地分配索引屬性，無(wú)需表明存在對(duì)應(yīng)的桌面版/移動(dòng)設(shè)備版網(wǎng)頁(yè)。
需要較少的工程人力資源投入即可維護(hù)包含相同內(nèi)容的多個(gè)網(wǎng)頁(yè)。
降低了出現(xiàn)影響移動(dòng)網(wǎng)站的常見(jiàn)錯(cuò)誤的可能性。
無(wú)需重定向即可使用戶獲得已針對(duì)設(shè)備進(jìn)行優(yōu)化的視圖，從而縮短加載時(shí)間。此外，基于用戶代理的重定向不僅容易出錯(cuò)，而且會(huì)使網(wǎng)站的用戶體驗(yàn)大打折扣(有關(guān)詳情，請(qǐng)參見(jiàn)“檢測(cè)用戶代理時(shí)的常見(jiàn)問(wèn)題”部分)。
在 Googlebot 抓取您的網(wǎng)站時(shí)可節(jié)省資源。對(duì)于采用自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的網(wǎng)頁(yè)，一個(gè) Googlebot 用戶代理只需抓取您的網(wǎng)頁(yè)一次(而不是像使用不同的
Googlebot 用戶代理時(shí)那樣需要抓取多次)，即可檢索到所有的內(nèi)容版本。提高抓取效率可間接協(xié)助 Google 將您網(wǎng)站的更多內(nèi)容編入索引，并確保抓取的內(nèi)容是最新的。
【自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的概念和方法】相關(guān)文章：
自適應(yīng)設(shè)計(jì)與響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的區(qū)別02-02
網(wǎng)頁(yè)設(shè)計(jì)的基本步驟及設(shè)計(jì)方法11-29
CSS讓網(wǎng)頁(yè)設(shè)計(jì)簡(jiǎn)單的方法12-11
移動(dòng)端網(wǎng)頁(yè)設(shè)計(jì)方法03-14
網(wǎng)頁(yè)設(shè)計(jì)的標(biāo)準(zhǔn)和規(guī)范06-27
axure網(wǎng)頁(yè)設(shè)計(jì)的方法有哪些03-02
網(wǎng)頁(yè)柔和色調(diào)設(shè)計(jì)的實(shí)用方法03-03
搜索框設(shè)計(jì)和布局的方法12-04