本文從響應式佈局的概念，響應式佈局的優缺點以及設計理念，還有具體的實現代碼都做了詳細說明，是篇不可多得的文章，這裡推薦給小伙伴一、什麼是響應式佈局?
響應式佈局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端-而不是為每個終端做一個特定的版本。
這個概念是為解決移動互聯網瀏覽而誕生的。響應式佈局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著目前大屏幕移動設備的普及，用大勢所趨來形容也不為過。
隨著越來越多的設計師採用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。
二、響應式佈局有哪些優點和缺點?優點：面對不同分辨率設備靈活性強
能夠快捷解決多設備顯示適應問題
缺點：兼容各種設備工作量大，效率低下
代碼累贅，會出現隱藏無用的元素，加載時間加長
其實這是一種折衷性質的設計解決方案，多方面因素影響而達不到最佳效果
一定程度上改變了網站原有的佈局結構，會出現用戶混淆的情況
三、響應式佈局該怎麼設計?1、 如何解決不同設備間的兼容問題？
CSS3中的Media Query（媒介查詢）可以解決這個問題。
2、media query能夠獲取哪些值?
設備的寬和高device-width，device-heigth顯示屏幕/觸覺設備。
渲染窗口的寬和高width，heigth顯示屏幕/觸覺設備。
設備的手持方向，橫向還是豎向orientation(portrait|lanscape)和打印機等。
畫面比例aspect-ratio點陣打印機等。
設備比例device-aspect-ratio-點陣打印機等。
對象顏色或顏色列表color，color-index顯示屏幕。
設備的分辨率resolution
3、語法結構及用法
語法：@media 設備名only (選取條件) not (選取條件) and(設備選取條件)，設備二{sRules}
用法：
a、示例一：在link中使用@media：
<link rel=stylesheet type=text/css media=only screen and (max-width: 480px),only screen and (max-device-width: 480px) href=link.css rel=external nofollow />
上面使用中only可省略，限定於計算機顯示器，第一個條件max-width是指渲染界面最大寬度，第二個條件max-device-width是指設備最大寬度。
b、在樣式表中內嵌@media：
複製代碼