在計(jì)劃中常常遇到這幾個(gè)成績：

1.想要網(wǎng)站兼容手機(jī)、平板電腦、pc，就得為分歧的裝備定制分歧的版本。

2.想要網(wǎng)站的某些頁面在寬屏表現(xiàn)器下一行表現(xiàn)更多的內(nèi)容，又得為寬屏定制一個(gè)版本。

3.很多人其實(shí)不是在全屏的環(huán)境下閱讀咱們的頁面，假如讓頁面跟著閱讀器寬度轉(zhuǎn)變而響應(yīng)的調(diào)劑會(huì)不會(huì)比較好？

有無方法能有用辦理這些成績呢？

響應(yīng)式Web計(jì)劃（Responsive Web design）的理念是頁面的計(jì)劃與開辟該當(dāng)依據(jù)裝備環(huán)境（屏幕尺寸、屏幕定向、體系平臺(tái)等）和用戶行動(dòng)（轉(zhuǎn)變窗口巨細(xì)等）停止響應(yīng)的響應(yīng)和調(diào)劑。詳細(xì)的理論方法由多方面構(gòu)成，包含彈性網(wǎng)格和布局、圖片、CSS media query的應(yīng)用等。不管用戶正在應(yīng)用pc、平板電腦，或許手機(jī)，不管是全屏表現(xiàn)還長短全屏的環(huán)境，不管屏幕是橫向照樣豎向，頁面都應(yīng)當(dāng)可以或許主動(dòng)切換分辨率、圖片尺寸及相干劇本功效等，以順應(yīng)分歧裝備。

響應(yīng)式web計(jì)劃對(duì)交互計(jì)劃和前端完成提出了更高的請(qǐng)求，需要斟酌清晰分歧分辨率下頁面的布局變更、內(nèi)容的縮放等。

響應(yīng)式Web計(jì)劃的上風(fēng)：

1.開辟、保護(hù)、經(jīng)營本錢上風(fēng)：頁面只有一個(gè)，只是針對(duì)分歧的分辨率、分歧的裝備環(huán)境停止了一些分歧的計(jì)劃，以是在開辟、保護(hù)和經(jīng)營上，絕對(duì)多個(gè)版本，能勤儉本錢。

2.兼容性上風(fēng)：挪動(dòng)裝備新的尺寸層見疊出，定制的版本平日只適用于某些規(guī)格的裝備，假如新的裝備分辨率變更較大，則每每不克不及兼容，而開辟新的版本需要光陰，這段光陰內(nèi)的拜訪就是個(gè)成績，然則響應(yīng)式Web計(jì)劃可以或許提早防備這個(gè)成績。

操縱機(jī)動(dòng)：響應(yīng)式計(jì)劃是針對(duì)頁面的，可以或許只對(duì)需要的頁面停止篡改，其余頁面不受影響。

實(shí)例展現(xiàn)

當(dāng)閱讀器寬度變小時(shí)，閣下兩欄的寬度都有減少，右邊的banner圖片和視頻也響應(yīng)減少，右邊的頭像列表由一排4個(gè)變成一排兩個(gè)。

當(dāng)閱讀器寬度進(jìn)一步變小后，頁面由兩欄布局變成一欄布局，部門內(nèi)容的尺寸進(jìn)一步減少，搜刮地區(qū)也從導(dǎo)航里挪到了導(dǎo)航外。

響應(yīng)式頁面的計(jì)劃流程

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

經(jīng)由進(jìn)程用戶研討，懂得用戶應(yīng)用的裝備散布環(huán)境，肯定需要兼容的裝備范例、屏幕尺寸。

裝備范例：包含挪動(dòng)裝備（手機(jī)、平板）和pc。對(duì)付挪動(dòng)裝備，計(jì)劃和完成的時(shí)刻留意增長手勢(shì)的功效。

屏幕尺寸：包含各類手機(jī)屏幕的尺寸（包含橫向和豎向）、各類平板的尺寸（包含橫向和豎向）、通俗電腦屏幕和寬屏。

第二步：制造線框原型

針對(duì)肯定上去的幾個(gè)尺寸分離制造分歧的線框原型，需要斟酌清晰分歧尺寸下，頁面的布局若何變更，內(nèi)容尺寸若何縮放，功效、內(nèi)容的刪減，乃至針對(duì)特別的環(huán)境作特別化的計(jì)劃等。這個(gè)進(jìn)程需要計(jì)劃師和前端開辟職員堅(jiān)持親密的相同。

第三步：測(cè)試線框原型

將圖片導(dǎo)入到響應(yīng)的裝備停止一些簡略的測(cè)試，可贊助咱們及早發(fā)明可拜訪性、可讀性等方面存在的成績。

第四步：視覺計(jì)劃

留意，挪動(dòng)裝備的屏幕像素密度與傳統(tǒng)電腦屏幕不一樣，在計(jì)劃的時(shí)刻需要包管內(nèi)容筆墨的可讀性、控件可點(diǎn)擊地區(qū)的面積等。

第五步：前端完成

與傳統(tǒng)的web開辟比擬，響應(yīng)式計(jì)劃的頁面因?yàn)轫撁娌季帧?nèi)容尺寸發(fā)生了變更，以是終極的產(chǎn)出更有可能與計(jì)劃稿收支較大，需要前端開辟職員和計(jì)劃師多相同。