移動(dòng)互聯(lián)網(wǎng)時(shí)代，如何使我們設(shè)計(jì)的網(wǎng)站在移動(dòng)端也能被用戶瀏覽呢？這里給大家介紹響應(yīng)式設(shè)計(jì)。

一、響應(yīng)式網(wǎng)站定義

1.響應(yīng)式定義

響應(yīng)式網(wǎng)頁設(shè)計(jì)（Responsive Web Design簡稱RWD）這個(gè)術(shù)語，由伊?！ゑR科特（Ethan

Marcotte）提出。他在A List Apart 發(fā)表了一篇開創(chuàng)性的文章，將三種已有的開發(fā)技術(shù)（彈性網(wǎng)格、彈性圖片、媒體查詢）整合起來，并命名為響應(yīng)式網(wǎng)頁設(shè)計(jì)。

響應(yīng)網(wǎng)站設(shè)計(jì)應(yīng)根據(jù)用戶使用的設(shè)備的分辨率大小進(jìn)行相應(yīng)的響應(yīng)與調(diào)整，最大限度滿足

不同設(shè)備用戶體驗(yàn)需求。響應(yīng)式網(wǎng)站設(shè)計(jì)就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端，不需要為每個(gè)終端做一個(gè)特定的版本。

簡單地理解：一個(gè)響應(yīng)式網(wǎng)站＝phone端網(wǎng)站＋pad端網(wǎng)站＋電腦端網(wǎng)站

2.響應(yīng)式設(shè)計(jì)中的界面設(shè)計(jì)

對于界面設(shè)計(jì)，我們以前針對桌面產(chǎn)品的設(shè)計(jì)可能就是一個(gè)尺寸的，每個(gè)模塊的位置比較

固定，但是在響應(yīng)式設(shè)計(jì)中，這些東西就改變了，設(shè)計(jì)師會(huì)根據(jù)產(chǎn)品的需要設(shè)計(jì)多個(gè)版本的設(shè)計(jì)。

但是有一點(diǎn)我們需要注意的是 DOM 節(jié)點(diǎn)的順序最好保持一致，因?yàn)樵陧憫?yīng)式的頁面中，

我們會(huì)使用流式布局，在固定版式通過絕對定位或者外邊距負(fù)值的方式改變DOM 順序和視覺順序的技巧，在這里可能并不適用。

3.蘋果官網(wǎng)

1.彈性網(wǎng)格.可基于屏幕分辨率擴(kuò)展或拉伸內(nèi)容。

2.彈性圖片在小屏幕上可縮小尺寸，并可擴(kuò)展大最大尺寸以支持大屏幕。

3.媒體查詢,是放在站點(diǎn)HTML和樣式表中的代碼段，用來收集設(shè)備顯示能力的信息以支持

多種形式的界面。

二、響應(yīng)式網(wǎng)站前景

1.外部環(huán)境

快速增長且日趨加劇的可聯(lián)網(wǎng)設(shè)備的多樣化，讓現(xiàn)今已不再有標(biāo)準(zhǔn)的屏幕尺寸。

2.自身特色 嚴(yán)格定義的響應(yīng)式一般是指響應(yīng)式Web設(shè)計(jì)，而Web憑借其特有的靈活性和可塑性，可以適應(yīng)各種尺寸和配置的設(shè)備，可以無處不在。

3.內(nèi)部需求

響應(yīng)式設(shè)計(jì)概念一提出，各大網(wǎng)站及平臺(tái)都希望能夠采用這秉一應(yīng)萬的模式，可以更靈活

地去適配更多設(shè)備，尤其是現(xiàn)在移動(dòng)設(shè)備大爆棚的時(shí)代。

4 .一切彈性化

我們通過響應(yīng)式的設(shè)計(jì)和開發(fā)思路讓頁面更加'彈性'了。圖片的尺寸可以被自動(dòng)調(diào)整，頁

面布局再不會(huì)被破壞。雖然永遠(yuǎn)沒有最完美的解決方案，但它給了我們更多選擇。無論用戶切換設(shè)備的屏幕定向方式，還是從臺(tái)式機(jī)屏幕轉(zhuǎn)到iPad上瀏覽，頁面都會(huì)真正的富有彈性。通過液態(tài)網(wǎng)格和液態(tài)圖片技術(shù)，并且在正確的地方使用了正確的HTML標(biāo)記。

5 .響應(yīng)式圖片

響應(yīng)式圖片技術(shù)思想：不僅要同比的縮放圖片，還要在小設(shè)備上降低圖片自身的分辨率。

當(dāng)這些請求到達(dá)服務(wù)器端,后臺(tái)文件會(huì)決定這些請求所需要的是原始圖片還是小尺寸的'響應(yīng)式圖片'，并進(jìn)行相應(yīng)的反饋輸出。對于小屏幕的移動(dòng)設(shè)備，原始尺寸的大圖片永遠(yuǎn)不會(huì)被用到。

四、響應(yīng)式網(wǎng)站有哪些優(yōu)缺點(diǎn)

優(yōu)點(diǎn)

1、支持任何設(shè)備和系統(tǒng)

如今是移動(dòng)互聯(lián)網(wǎng)時(shí)代，人們上網(wǎng)不再是僅限于PC電腦，手機(jī)、平板等移動(dòng)設(shè)備的使用

率也越來越高。而響應(yīng)式網(wǎng)站可支持任何設(shè)備訪問，而且還可以在瀏覽器中調(diào)整網(wǎng)站的寬度，讓網(wǎng)站不出現(xiàn)滾動(dòng)條，使得用戶不管在任何一種顯示器上瀏覽網(wǎng)站，都不會(huì)出現(xiàn)布局混亂、顯示不全、或者是亂碼的問題，從而最大程度的提高用戶的網(wǎng)站體驗(yàn)。

2、可降低制作的時(shí)間成本和資金成本

按照傳統(tǒng)方法制作出的網(wǎng)站比較有局限性，不一定能夠在各種設(shè)備和瀏覽器正常訪問。有

的企業(yè)就需要做一個(gè)PC端網(wǎng)站和一個(gè)手機(jī)網(wǎng)站甚至是做一個(gè)APP，這些都需要投入大量的時(shí)間和金錢。而建設(shè)響應(yīng)式網(wǎng)站就可以很好解決這個(gè)問題，花一份的錢，就能夠獲得兩種網(wǎng)站的體驗(yàn)，最終實(shí)現(xiàn)一站多用的效果，從而達(dá)到節(jié)省網(wǎng)站建設(shè)成本。

3、三站合一，維護(hù)輕松

電腦、手機(jī)、微信三個(gè)網(wǎng)站使用的是同一個(gè)網(wǎng)址，同一個(gè)后臺(tái)管理，數(shù)據(jù)同步更新，所有

圖片和內(nèi)容只需要上傳更新一次即可，維護(hù)簡單輕松，節(jié)約大量的時(shí)間和金錢。

缺點(diǎn)

1:對IE老版兼容性不友好

對于老版本IE（IE6、IE7、IE8）支持不好，這是一個(gè)致命的問題，如果你的網(wǎng)站用戶大

多還采用老版本IE的話，建議不做響應(yīng)式網(wǎng)頁設(shè)計(jì)。

2:靈活性有所欠缺

基于不同終端的設(shè)備屬性不同，對產(chǎn)品用戶體驗(yàn)要求就會(huì)截然不同。內(nèi)容比較多帶有功能

性的網(wǎng)站不適合做響應(yīng)式

3:速度可能會(huì)變慢

由于響應(yīng)式頁面是同時(shí)下載多套CSS樣式代碼，可能在手機(jī)上就下載PC、Pad的冗余代碼，

導(dǎo)致文件變大，影響加載速度。

四、響應(yīng)式網(wǎng)站設(shè)計(jì)的四個(gè)層次

1.同一頁面在不同大小和比例上看起來都應(yīng)該是舒適的

2.同一頁面在不同分辨率上看起來都應(yīng)該是合理的

3.同一頁面在不同操作方式（如鼠標(biāo)和觸屏）下，體驗(yàn)應(yīng)該是統(tǒng)一的

4.同一頁面在不同類型的設(shè)備（手機(jī)、平板、電腦）上，交互方式應(yīng)該是符合習(xí)慣的。

五、ipad&iphone設(shè)計(jì)規(guī)范

1 iPad設(shè)計(jì)尺寸

尺寸：1024*768px

狀態(tài)欄：20px

導(dǎo)航欄：44px

標(biāo)簽欄：49px

2 THE OUTENT 電商APP

1.字體

2.圖標(biāo)

3.公共控件

3 iphone設(shè)計(jì)尺寸

尺寸：750*1334px

狀態(tài)欄：40px

導(dǎo)航欄：88px

標(biāo)簽欄：98px

界面尺寸及欄高度

1.文字

在一款A(yù)PP中字號范圍一般在20-36之間（@2x）,當(dāng)然iOS 11中出現(xiàn)了大標(biāo)題的設(shè)計(jì)，

字號還是要根據(jù)產(chǎn)品屬性酌情設(shè)定。另外需要注意的一點(diǎn)是所有的字號設(shè)置都必須為偶數(shù)，上下級內(nèi)容字號極差關(guān)系為2-4號。

總結(jié)

通過本篇文章你可以學(xué)到以下幾點(diǎn)：

1.什么是響應(yīng)式網(wǎng)站；

2.響應(yīng)式網(wǎng)站的前景；

3.響應(yīng)式網(wǎng)站有哪些優(yōu)缺點(diǎn)；

4.響應(yīng)式網(wǎng)站設(shè)計(jì)的四個(gè)層次；

5.常見的移動(dòng)端設(shè)備的尺寸規(guī)范