什麼是響應式布局設計？

01-03

看一個例子：Mashable 的首頁：

瀏覽器窗口最大化時：

縮小瀏覽器窗口：

再縮小：

再縮小：

以上。

起因

因為越來越多的智能移動設備（ mobile, tablet device ）加入到互聯網中來，移動互聯網不再是獨立的小網路了，而是成為了 Internet 的重要組成部分。響應式網路設計（ RWD / AWD）的出現，目的是為移動設備提供更好的體驗，並且整合從桌面到手機的各種屏幕尺寸和解析度，用技術來使網頁適應從小到大（現在到超大）的不同解析度的屏幕。

註： Responsive Web Design ＝ RWD，Adaptive Web Design ＝ AWD，下同

設計

RWD：

採用 CSS 的 media query 技術
流體布局（ fluid grids ）
自適應的圖片/視頻等資源素材

（為小、中、大屏幕做一些優化，目的是讓任何尺寸的屏幕空間都能得到充分利用）

AWD：

CSS media query 技術（僅針對有限幾種預設的屏幕尺寸設計）
用 Javascript 來操作 HTML 內容
在伺服器端操作 HTML 內容（比如為移動端減少內容，為桌面端提供更多內容）

設計思路

Mobile First（從移動端開始，RWD ）：

一切從最小屏幕的手機端開始（比如 iPhone 的 320px ），先確定內容，然後逐級往大屏幕設計。

不同於原來網頁設計，總是從桌面電腦的 1024px 開始的。

很久很久很久以前，每個人都只有一件衣服（ Website ），不管你有錢沒錢大家每天都只穿這一件。

後來有人發明了舞會（移動互聯網），大家都爭先恐後地想要參加，於是一個做「開發」的裁縫忽悠人們說進舞會最好訂做一件專門的禮服（ Mobile Site ），大家想想也對，上班和出去哈皮都穿同一件衣服多無聊啊，舞會就要有舞會的樣子。於是乎只要有點閑錢的人都做了禮服，他和原來那件叫做 Website 的衣服是完全不一樣的，面子不一樣，里子也不一樣。

後來舞會的種類越來越多了，很多人被迫做了好多好多件禮服，於是又有一個叫做「前端」的裁縫站出來說你們每年要新做那麼多衣服，多費錢啊，而且一出門鑰匙啊皮夾子啊名片都要在不同衣服里換來換去多麻煩。你看，我們新發明了一個手藝叫做「Responsive Design」，只要把你原來那件衣服稍微那麼一改，以後去哪個舞會都可以只穿這一件衣服，衣服的里子永遠都差不多，但面子可以按照要求自適應不同的舞會。

於是所有人都開始換上這種響應式的衣服了。。。

什麼是響應式界面

根據維基百科及其參考文獻，理論上，響應式界面能夠適應不同的設備。描述響應式界面最著名的一句話就是「Content is like water」，翻譯成中文便是「如果將屏幕看作容器，那麼內容就像水一樣」。

為什麼要設計響應式界面

為何按老辦法為主流設計特殊版本呢？為什麼要費神地嘗試統一所有設備呢？

即便是PC或Mac用戶，有查顯示只有一半的人會將瀏覽器全屏顯示，而剩下的一般人使用多大的瀏覽器，很難預知；
台式機、投影、電視、筆記本、手機、平板、手錶、VR……智能設備正在不斷增加，「主流設備」的概念正在消失；
屏幕解析度正飛速發展，同一張圖片在不同設備上看起來，大小可能天差地別。
滑鼠、觸屏、筆、攝像頭手勢……不可預期的操控方式正在不斷出現。

響應式界面的四個層次

1、同一頁面在不同大小和比例上看起來都應該是舒適的；

2、同一頁面在不同解析度上看起來都應該是合理的；

4、同一頁面在不同操作方式（如滑鼠和觸屏）下，體驗應該是統一的；

5、同一頁面在不同類型的設備（手機、平板、電腦）上，交互方式應該是符合習慣的。

響應式界面的基本規則

1、可伸縮的內容區塊：內容區塊的在一定程度上能夠自動調整，以確保填滿整個頁面

2、可自由排布的內容區塊：當頁面尺寸變動較大時，能夠減少/增加排布的列數

3、適應頁面尺寸的邊距：到頁面尺寸發生更大變化時，區塊的邊距也應該變化

4、能夠適應比例變化的圖片：對於常見的寬度調整，圖片在隱去兩側部分時，依舊保持美觀可用

5、能夠自動隱藏/部分顯示的內容：如在電腦上顯示的的大段描述文本，在手機上就只能少量顯示或全部隱藏

6、能自動摺疊的導航和菜單：展開還是收起，應該根據頁面尺寸來判斷

7、放棄使用像素作為尺寸單位：用dp尺寸等方法來確保頁面在解析度相差很大的設備上，看起來也能保持一致。同時也要求提供的圖片應該比預想的更大，才能適應高解析度的屏幕。否則，就會像我的Photoshop一樣出現一下這種情況：

P.S. 圖片似乎展示得不是很貼切，因為我的筆記本電腦的解析度太高，Photoshop看起來特別小（字都很難看清）

伊桑·馬科特（Ethan Marcotte）在2010年首先提出了響應式網頁設計（RWD,Responsive Web Design）這個術語。在他的一篇文章《Responsive Web Design · An A List Apart Article》中他將已有的三種發開技巧（彈性圖片，彈性網格布局，媒體與媒體查詢）進行了整合，命名為響應式網頁設計。

那什麼才是真正的響應式設計？馬科特說，真正的響應式設計方法不僅僅是根據可視區域大小而改變網頁布局，而是要從整體上顛覆當前網頁的設計方法，是針對任意設備的網頁內容進行完美布局的一種顯示機制。馬科特在文章中舉了一個大偵探福爾摩斯的例子A Flexible Grid，它可以自動識別並相應的調整頁面布局。

響應式布局設計，是指將桌面設備上的網頁內容在移動設備上進行優化排版，使用戶能夠在移動設備上更方便地閱讀並操作。其實，如果經常使用不同的設備瀏覽互聯網網頁，就會比較容易體會響應式布局設計在移動設備上的應用。為使題主能夠更好的理解響應式布局設計，康石石從其設計理念入手作進一步解釋：

響應式web設計（Responsive web design）

在全面進入互聯網時代後，隨著各種移動設備的普及，移動互聯網更加受到大眾的青睞。由於移動互聯網的使用量遠遠超出了傳統互聯網的使用量，移動設備也正在逐漸超越桌面設備。因為用戶在移動設備上的使用習慣不同，UX設計師無法將桌面設備上的網頁排版原封不動地複製到移動設備上，這會使用戶在網頁的操作和閱讀上十分不方便。

因此，設計師試圖將移動設備和桌面設備的網頁分開來設計，然而因此面對的問題是：市場上移動設備屏幕的尺寸都是完全不一樣的。比如iPhone的移動設備已經更新過很多次屏幕尺寸；不同品牌之間設備屏幕尺寸也無法把控，設計師不能為每一個不同的屏幕尺寸去設計適合它們尺寸的網頁。

圖片來源：https://timgsa.com/timg?imagequality…

這種情況下，Ethan Marcotte在2010年提出了響應式web設計（Responsive web design）這一概念，其設計目標是：自行識別設備屏幕尺寸並做出相應調整的網頁設計，從而提高網頁在移動端的用戶體驗。同時，Ethan Marcotte也模擬建立了一個簡單的響應式web的示範網站，題主可以點進鏈接體驗一下。

網站鏈接：https://alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html

從響應式web設計的模擬示範網站可以看出，根據顯示屏的大小變化、頁面的排版布局都相應地自動作出了調整，整個頁面里的所有元素都是靈活的，頁面的排版不再受顯示屏大小的限制。因此，響應式web設計的出現，其可用性被大大提高，無論是在哪個用戶端，用戶都可以按照自己的使用習慣瀏覽頁面，減少使用時發生錯誤的幾率，從而獲得更好的用戶體驗。

圖片來源：http://www.e-goodnews.com.tw/www/images/mod2/20150225135718vj9y.jpg

另外，除了響應式web設計，為迎合其他移動用戶端，自適應web設計（Adaptive Web Design）的應用也非常廣泛。為了方便題主更全面地理解響應式web設計，我認為有必要將它與自適應web設計做一個對比。因為如果搜索自適應web設計，很可能將出現下面的文字：

響應式網頁設計（Responsive web design，通常縮寫為RWD），或稱自適應網頁設計、回應式網頁設計、對應式網頁設計。

實際上，響應式web設計和自適應web設計是有一定區別的，其中最根本的差別是：自適應web設計是網頁內容根據設備的不同而進行「適應」，響應式web設計則是網頁的布局針對屏幕大小的尺寸而進行響應。響應式web在網頁上並不會自動為用戶隱藏圖片或簡化菜單，而是將原本網頁上所有的內容原封不動地進行展示，但是手機端上的排版則會自動進行優化從而方便用戶閱讀、瀏覽以及使用該網頁。

以上望有幫助，歡迎交流

———————————————————

歡迎關注我的個人官方微信（kang-shishi）

如有藝術留學、院校、專業、作品集方面的問題，可私信康石石諮詢

http://www.liquidapsive.com/

這個頁面右上角有個下拉列表，選項分別是：

static 靜態布局

fluid 流式布局

adaptive 自適應布局

responsive 響應式布局

你在這幾個選項之間切換，然後縮放瀏覽器寬度，查看不同布局的效果。你會發現，響應式，算是綜合了流式和自適應。

響應式網站主要就是考慮PC端、平板端、移動端的網站自適應設計。

響應式網站設計是趨勢了，同時關於響應式網站設計也出了許多優秀的前端框架，拿來就用，比較出名的響應式開發框架有：

Bootstrap中文網

The most advanced responsive front-end framework in the world.

首頁 | 直達客自助建站

響應式就是網頁會根據解析度大小調整網頁結構版式，使其能夠被友好閱讀。推薦響應式查詢工具跨屏測，另外自薦一下我們公司專門做響應式h5開發的

通俗得講是：css根據屏幕寬度，自動調整網頁div顯示和布局，以適應不同尺寸屏幕優化瀏覽體驗。

自適應網頁設計/自響應網頁設計（Responsive Web Design）是指網頁能自動識別屏幕寬度、並做出相應調整的網頁設計。主要是針對現在互聯網用戶使用多種終端瀏覽同一個網頁的行為趨勢，如果每個網站為此就得製作一個App，成本高且安裝率低，完全沒有必要，所以自適應網頁設計其實才是未來的趨勢，尤其小網站。

如果覺得這個概念不太容易理解的話，請看下面這個網站，這是自適應網頁設計最好的教學案例網站。看了就全明白了。

Media Queries

在PC上你看的網站可能是這樣的:

在小屏幕或平板上你看到的網站可能是這樣的:

響應式布局就是根據屏幕大小自動布局.

看一個例子

http://zx.jd.com

在大全屏瀏覽器上看然後把瀏覽器的窗口縮小

能夠自動布局網頁頁面，針對不同的屏幕可以自動的變換排版，但是內容是一樣的，有需要可聯繫我，一般這樣的頁面價格1000多

響應式就是通過檢測當前設備瀏覽器Client像素寬度，來使用相應的樣式（也就是所謂的自適應）的一種前端開發技術。

響應式網站自動調節大小，自動適應手機、電腦等各種設備，維護成本低。像華為蘋果這些網站都是響應式，像新浪這樣的門戶網站的有些欄目已經在用響應式。你想新浪這種要是又更新PC端，又要更新手機端，那工作量很大的。國內很多網站也慢慢使用響應式了。國內響應式平台不多，創盛自助建站、起飛頁、突阿唯

頁面的設計與開發應當根據用戶行為以及設備環境進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換解析度、圖片尺寸及相關腳本功能等，以適應不同設備；換句話說，頁面應該有能力去自動響應用戶的設備環境。響應式頁面設計就是一個網站能夠兼容多個終端，而不是為每個終端做一個特定版本。

響應式布局根據瀏覽器的大小，顯示不同的內容。大屏顯示多行，小屏顯示一行，一般設計2種

利用媒介查詢，實時更改布局，達到更好展現內容的目的。

好吧，上面的幾位說的都對。我只說一個細節的經驗：

當你的產品做成響應式設計的時候，可能會遇到圖標在適應屏幕尺寸的時候拉伸或擠壓變形導致模糊，這個時候可以將圖標做成字體（Icon Font）。

優點在於

1. Icon是矢量的，可以自由適應各種尺寸大小,不會模糊

2. 佔用空間很小，250個圖標的字體只有不到300K

3. Icon Font可控性更高，可以用代碼去控制大小、顏色、透明度、特效等

缺點在於

1. 不支持同一個Icon出現2種或2種以上的顏色

但是很明顯，Icon Font的利大於弊。

有一項新技術，是有關於單位的，rem，是相對於根元素的字體大小，以前用過的em，則是相對於父元素的大小。這裡的根元素，是指的HTML元素，設置html字體大小，就可以控制rem大小。一般，會將html{font-weight: 10px;}，這樣方便計算。例如，某div的寬為200px，這時可設置該div{width: 20rem}。這有一篇很不錯的文章，介紹的很全面，http://isux.tencent.com/web-app-rem.html。