# 說在前面的話
多屏時代到來了,手機、平板、電腦、投影,各式各樣的終端,出現再大家的生活中。最近一句話比較火,世界上最遠的距離是我在你面前,而你卻在玩手機。多屏時代的來臨,網頁設計師不得不面對一個問題,如何讓我們做出的網站能很好的呈現在終端上呢?這就是我們要談的響應式WEB。
這里我們主要從兩個方式來說:
1. 響應式WEB設計(Responsive Web Design)
2. 響應式WEB開發(Responsive Web Development)
## 1.什么事響應式網頁設計?
如果倒退五年,沒有人能相信互聯網會以今天這樣爆炸式的速度發展,尤其是移動互聯網的發展速度又遠遠超過了常規桌面網站,現在已經很難找到不擁有智能手機的朋友了, 很多人還擁有自己的 ipad,所以我們的生活正式進入了多屏時代,響應式設計其實是很多技巧的集合,目的是讓一個網站,一份代碼,能夠適應多個屏幕尺寸,而不是像以前那樣專門給手機做一套移動版的代碼。

內容應該像水一樣,你把它放到茶壺里面,它就是個茶壺,放到茶杯里面它就應該是個茶杯。
### 1.1響應式這個詞是怎么來的呢?

其實最早在2010年5月下旬,設計師 Ethan Marcotte發布了一篇名為 [Responsive Web Design](http://alistapart.com/article/responsive-web-design) 的文章。 從此響應式網頁設計( RWD )的身影就出現在了公眾面前。 文章提到,“響應式” 這個詞借用自建筑學領域,原本指的是建筑物本身會 “響應” 實際的使用情況,來自我調整。到 web 開發領域,“響應式” 的意思就變成了,我們的頁面會 “響應” 用戶的設備尺寸而自動調整布局。另外,Edthan 還專門寫過一本書,就叫 [響應式設計](https://abookapart.com/products/responsive-web-design)。他制作了一個響應式事例,也是很經典的,里面是《福爾摩斯歷險記》六個主人公的頭像。如果屏幕寬度大于1300像素,則6張圖片并排在一行。

如果屏幕寬度在600像素到1300像素之間,則6張圖片分成兩行。

如果屏幕寬度在400像素到600像素之間,則導航欄移到網頁頭部。

如果屏幕寬度在400像素以下,則6張圖片分成三行。

那通過這個網站,大家應該初步對響應式網站是個什么樣的有個初步的了解了。其實在設計師Ethan Marcotte的文章中就說到“未來我們應該這樣,隨著網頁訪問設備的增加我們不會為每個設備單獨設計,而是會只做一份設計,而把每個設備作為這個設計要照顧的一個方面。”。換句話說,每個設備上都會去追求最佳的用戶體驗,設計會自動適應各個設備。在過去的時代,設計師精確的知道自己的媒介材質,比如一張 A4 紙張,一個名片,或者一張海報。但是在我們這個多屏時代,網頁設計必須有這樣的思維,我們要為“任意尺寸”而去設計。
### 響應式設計三要素
響應式網站設計,只是乍看起來很繞人,其實是有一些很簡單的基本原則的。彈性布局,彈性媒體,和 Media-query 是做響應式設計的三個組件,后面我們都會結合實際代碼來做詳細介紹的。
彈性布局,彈性媒體的叫法來自 http://learn.shayhowe.com/advanced-html-css/responsive-web-design/ 。 在[Ethan 的文章中](http://alistapart.com/article/responsive-web-design/) “彈性布局”( flexible layout )沒有提,而是被稱為 “流體網格”( fliud grid ),不過意思是差不多的。所謂的彈性媒體,其實主要就是針對圖片而言,也包括視頻。所以大家不要害怕,沒那么高深,讓我們一一道來~~