WEB響應式設計5步驟，讓你的(de)網站兼容移動設備-行業新聞-秦皇島百圖網絡科技有限公司

在設計中經常遇到這(zhè)幾個(gè)問題：

想要網站兼容手機、平闆電腦(nǎo)、pc，就得(de)爲不同的(de)設備定制不同的(de)版本。
想要網站的(de)某些頁面在寬屏顯示器下(xià)一行顯示更多(duō)的(de)内容，又得(de)爲寬屏定制一個(gè)版本。
很多(duō)人(rén)并不是在全屏的(de)情況下(xià)浏覽我們的(de)頁面，如果讓頁面随著(zhe)浏覽器寬度改變而相應的(de)調整會不會比較好？

有沒有辦法能有效解決這(zhè)些問題呢(ne)？

響應式Web設計(Responsive Web design)的(de)理(lǐ)念是頁面的(de)設計與開發應當根據設備環境（屏幕尺寸、屏幕定向、系統平台等）以及用(yòng)戶行爲（改變窗(chuāng)口大(dà)小等）進行相應的(de)響應和(hé)調整。具體的(de)實踐方式由多(duō)方面組成，包括彈性網格和(hé)布局、圖片、CSS media query的(de)使用(yòng)等。無論用(yòng)戶正在使用(yòng)pc、平闆電腦(nǎo)，或者手機，無論是全屏顯示還(hái)是非全屏的(de)情況，無論屏幕是橫向還(hái)是豎向，頁面都應該能夠自動切換分(fēn)辨率、圖片尺寸及相關腳本功能等，以适應不同設備。

響應式web設計對(duì)交互設計和(hé)前端實現提出了(le)更高(gāo)的(de)要求，需要考慮清楚不同分(fēn)辨率下(xià)頁面的(de)布局變化(huà)、内容的(de)縮放等。

響應式Web設計的(de)優勢：

開發、維護、運營成本優勢：頁面隻有一個(gè)，隻是針對(duì)不同的(de)分(fēn)辨率、不同的(de)設備環境進行了(le)一些不同的(de)設計，所以在開發、維護和(hé)運營上，相對(duì)多(duō)個(gè)版本，能節約成本。
兼容性優勢：移動設備新的(de)尺寸層出不窮，定制的(de)版本通(tōng)常隻适用(yòng)于某些規格的(de)設備，如果新的(de)設備分(fēn)辨率變化(huà)較大(dà)，則往往不能兼容，而開發新的(de)版本需要時(shí)間，這(zhè)段時(shí)間内的(de)訪問就是個(gè)問題，但是響應式Web設計可(kě)以提前預防這(zhè)個(gè)問題。
操作靈活：響應式設計是針對(duì)頁面的(de)，可(kě)以隻對(duì)必要的(de)頁面進行改動，其他(tā)頁面不受影(yǐng)響。

實例展示

當浏覽器寬度變小時(shí)，左右兩欄的(de)寬度都有縮小，左邊的(de)banner圖片和(hé)視頻(pín)也(yě)相應縮小，右邊的(de)頭像列表由一排4個(gè)變爲一排兩個(gè)。
當浏覽器寬度進一步變小後，頁面由兩欄結構變爲一欄結構，部分(fēn)内容的(de)尺寸進一步縮小，搜索區(qū)域也(yě)從導航裏挪到了(le)導航外。

響應式頁面的(de)設計流程

第一步：确定需要兼容的(de)設備類型、屏幕尺寸

通(tōng)過用(yòng)戶研究，了(le)解用(yòng)戶使用(yòng)的(de)設備分(fēn)布情況，确定需要兼容的(de)設備類型、屏幕尺寸。
設備類型：包括移動設備（手機、平闆）和(hé)pc。對(duì)于移動設備，設計和(hé)實現的(de)時(shí)候注意增加手勢的(de)功能。
屏幕尺寸：包括各種手機屏幕的(de)尺寸（包括橫向和(hé)豎向）、各種平闆的(de)尺寸（包括橫向和(hé)豎向）、普通(tōng)電腦(nǎo)屏幕和(hé)寬屏。
需要考慮的(de)問題：
某個(gè)頁面進行響應式設計時(shí)其适用(yòng)的(de)尺寸範圍是哪些？比如，1688搜索結果頁面，跨度可(kě)以從手機到寬屏，而1688首頁，由于結構過于複雜(zá)，想直接遷移到手機上，不太現實，不如直接設計一個(gè)手機版的(de)首頁。
結合用(yòng)戶需求和(hé)實現成本，對(duì)适用(yòng)的(de)尺寸進行取舍。比如一些功能操作的(de)頁面，用(yòng)戶一般沒有在移動端進行操作的(de)需求，沒有必要進行響應式設計。

第二步：制作線框原型

針對(duì)确定下(xià)來(lái)的(de)幾個(gè)尺寸分(fēn)别制作不同的(de)線框原型，需要考慮清楚不同尺寸下(xià)，頁面的(de)布局如何變化(huà)，内容尺寸如何縮放，功能、内容的(de)删減，甚至針對(duì)特殊的(de)環境作特殊化(huà)的(de)設計等。這(zhè)個(gè)過程需要設計師和(hé)前端開發人(rén)員(yuán)保持密切的(de)溝通(tōng)。