講到響應式布局，相信大家都有一定的了解，響應式布局是今年很流行的一個設計理念，隨着移動互聯網的盛行，為解決如今各式各樣的瀏覽器分辨率以及不同移動設備的顯示效果，設計師提出了響應式布局的設計方案。今天就和大家來講講響應式布局這件小事，包含什么是響應式布局、響應式布局的優點和缺點以及響應式布局該怎么設計（通過CSS3 Media Query實現響應布局）。
一、什么是響應式布局?
響應式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。
響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨着目前大屏幕移動設備的普及，用大勢所趨來形容也不為過。隨着越來越多的設計師采用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。
二、響應式布局有哪些優點和缺點?
優點：
面對不同分辨率設備靈活性強
能夠快捷解決多設備顯示適應問題
缺點：
兼容各種設備工作量大，效率低下
代碼累贅，會出現隱藏無用的元素，加載時間加長
其實這是一種折衷性質的設計解決方案，多方面因素影響而達不到最佳效果
一定程度上改變了網站原有的布局結構，會出現用戶混淆的情況
三、響應式布局該怎么設計?
我們在上面了解了什么是響應式布局，那在我們的實際項目中應該怎么去設計呢?在以往我們設計網站的時候都會受到不同瀏覽器的兼容性的困擾，現在還要來個不同尺寸設備，我們該怎么淡定下來呢?有需求就會有解決方案，呵呵，說到響應式布局，就不得不提起CSS3中的Media Query（媒介查詢），這可是個好東西，易用、強大、快捷……Media Query是制作響應式布局的一個利器，使用這個工具，我們可以非常方便快捷的制造出各種豐富的實用性強的界面。接下來就一起來深入的了解Media Query。
1、CSS中的Media Query（媒介查詢）是什么?
通過不同的媒體類型和條件定義樣式表規則。媒體查詢讓CSS可以更精確作用於不同的媒體類型和同一媒體的不同條件。媒體查詢的大部分媒體特性都接受min和max用於表達”大於或等於”和”小與或等於”。如：width會有min-width和max-width媒體查詢可以被用在CSS中的@media和@import規則上，也可以被用在HTML和XML中。通過這個標簽屬性，我們可以很方便的在不同的設備下實現豐富的界面，特別是移動設備，將會運用更加的廣泛。
2、media query能夠獲取哪些值?
地址 ：http://q8.ui90.com/response-type-layout-design.html