# 說在前面的話 多屏時代到來了，手機、平板、電腦、投影，各式各樣的終端，出現再大家的生活中。最近一句話比較火，世界上最遠的距離是我在你面前，而你卻在玩手機。多屏時代的來臨，網頁設計師不得不面對一個問題，如何讓我們做出的網站能很好的呈現在終端上呢？這就是我們要談的響應式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 ），不過意思是差不多的。所謂的彈性媒體，其實主要就是針對圖片而言，也包括視頻。所以大家不要害怕，沒那么高深，讓我們一一道來~~