正在計劃中常常碰到那幾個題目：

　　1.念要網站兼容腳機、仄板電腦、pc，便得為分歧的裝備定造分歧的版本。

　　2.念要網站的某些頁裡正在寬屏表現器下一止表現更多的內容，又得為寬屏定造一個版本。

　　3.許多人其實不是正在齊屏的情形下閱讀我們的頁裡，假如讓頁裡跟著閱讀器寬度轉變而響應的調劑會沒有會比擬好?

　　有無方法能有用辦理那些題目呢?

　　相應式Web計劃(Responsive Web design)的理念是頁裡的計劃取開辟應該依據裝備情況(屏幕尺寸、屏幕定背、體系仄臺等)和用戶行動(轉變窗心年夜小等)舉行響應的相應戰調劑。詳細的理論方法由多圓裡構成，包含彈性網格戰結構、圖片、CSS media query的應用等。不管用戶正正在應用pc、仄板電腦，大概腳機，不管是齊屏表現照樣非齊屏的情形，不管屏幕是橫背照樣橫背，頁裡皆應當可以或許主動切換分辯率、圖片尺寸及相幹劇本功效等，以順應分歧裝備。

　　

　　相應式web計劃對交互計劃戰前端真現提出瞭更下的請求，須要斟酌清晰分歧分辯率下頁裡的結構變更、內容的縮放等。

　　相應式Web計劃的上風：

　　開辟、保護、運營本錢上風：頁裡隻要一個，隻是針對分歧的分辯率、分歧的裝備情況舉行瞭一些分歧的計劃，以是正在開辟、保護戰運營上，相對多個版本，能勤儉本錢。

　　兼容性上風：挪動裝備新的尺寸層見疊出，定造的版本平日隻實用於某些規格的裝備，假如新的裝備分辯率變更較年夜，則每每不克不及兼容，而開辟新的版本須要時光，那段時光內的拜訪便是個題目，然則相應式Web計劃能夠提早防備那個題目。

　　操縱靈巧：相應式計劃是針對頁裡的，能夠隻對需要的頁裡舉行修改，其他頁裡沒有受影響。

　　真例展現

　　

　　檢察線上demo

　　當閱讀器寬度變小時，閣下兩欄的寬度皆有縮小，左側的banner圖片戰視頻也響應縮小，右側的頭像列表由一排4個變成一排兩個。

　　當閱讀器寬度進一步變小後，頁裡由兩欄構造變成一欄構造，部門內容的尺寸進一步縮小，搜刮地區也從導航裡挪到瞭導航中。

　　相應式頁裡的計劃流程

　　第一步：肯定須要兼容的裝備范例、屏幕尺寸

　　經由過程用戶研討，懂得用戶應用的裝備散佈情形，肯定須要兼容的裝備范例、屏幕尺寸。

　　裝備范例：包含挪動裝備(腳機、仄板)戰pc。對付挪動裝備，計劃戰真現的時刻留意增長腳勢的功效。

　　屏幕尺寸：包含各類腳機屏幕的尺寸(包含橫背戰橫背)、各類仄板的尺寸(包含橫背戰橫背)、通俗電腦屏幕戰寬屏。

　　須要斟酌的題目：

　　某個頁裡舉行相應式計劃時其實用的尺寸規模是哪些?好比，1688搜刮成果頁裡，跨度能夠從腳機到寬屏，而1688尾頁，因為構造過於龐雜，念間接遷徙得手機上，沒有太實際，沒有如間接計劃一個腳機版的尾頁。

　　聯合用戶需乞降真現本錢，對實用的尺寸舉行棄取。好比一些功效操縱的頁裡，用戶一樣平常出有正在挪動端舉行操縱的需供，出有需要舉行相應式計劃。

　　第兩步：制造線框本型

　　針對肯定下去的幾個尺寸分離制造分歧的線框本型，須要斟酌清晰分歧尺寸下，頁裡的結構若何變更，內容尺寸若何縮放，功效、內容的刪加，乃至針對特別的情況做特別化的計劃等。那個進程須要計劃師戰前端開辟職員堅持親密的相同。

　　

　　圖片起源

　　第三步：測試線框本型

　　將圖片導進到響應的裝備舉行一些簡略的測試，可贊助我們盡早發明可拜訪性、可讀性等圓裡存正在的題目。

　　第四步：視覺計劃

　　留意，挪動裝備的屏幕像素稀度取傳統電腦屏幕紛歧樣，正在計劃的時刻須要包管內容筆墨的可讀性、控件可面擊地區的裡積等。

　　第五步：前端真現

　　取傳統的web開辟比擬，相應式計劃的頁裡因為頁裡結構、內容尺寸產生瞭變更，以是終極的產出更有大概取計劃稿收支較年夜，須要前端開辟職員戰計劃師多相同。

起源：/