講到響應式布局， 相信大家都有一定的了解，響應式布局是今年很流行的一個設計理念，随着移動網際網路的盛行，為解決如今各式各樣的浏覽器分辨率以及不同移動裝置的顯示效果， 設計師提出了響應式布局的設計方案。今天就和大家來講講響應式布局這件小事，包含什麼是響應式布局、響應式布局的優點和缺點以及響應式布局該怎麼設計（通 過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能夠擷取哪些值？
裝置的寬和高device-width，device-heigth顯示螢幕/觸覺裝置。
渲染視窗的寬和高width，heigth顯示螢幕/觸覺裝置。
裝置的手持方向，橫向還是豎向orientation（portrait|lanscape）和列印機等。
畫面比例aspect-ratio點陣列印機等。
裝置比例device-aspect-ratio-點陣列印機等。
對象顔色或顔色清單color，color-index顯示螢幕。
裝置的分辨率resolution。
3、文法結構及用法
@media 裝置名 only （選取條件） not （選取條件） and（裝置選取條件），裝置二{sRules}
示例一：在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”/>
上面使用中only可省略，限定于計算機顯示器，第一個條件max-width是指渲染界面最大寬度，第二個條件max-device-width是指裝置最大寬度。
示例二：在樣式表中内嵌@media：
@media （min-device-width:1024px） and （max-width:989px），screen and （max-device-width:480px），（max-device-width:480px） and （orientation:landscape），（min-device-width:480px） and （max-device-width:1024px） and （orientation:portrait） {srules}
在示例二中，設定了電腦顯示器分辨率（寬度）大于或等于1024px（并且最大可見寬度為989px）；屏寬在480px及其以下手持裝置；屏寬在 480px以及橫向（即480尺寸平行于地面）放置的手持裝置；屏寬大于或等于480px小于1024px以及垂直放置裝置的css樣式。
從上面的例子可以看出，字元間以空格相連，選取條件包含在小括号内，srules為相容設定的樣式表，包含在中括号裡面。only（限定某種裝置，可省略），and（邏輯與），not（排除某種裝置）為邏輯關鍵字，多種裝置用逗号分隔，這一點繼承了css基本文法。
4、可用裝置名參數：
5、邏輯關鍵字：
6、可用裝置名參數：
7、測試Media Queries
最後，我們需要對我們剛剛設計的Media Queries進行測試，想要在不同裝置上測試Media Queries的效果，可以使用一個浏覽工具來檢驗不同尺寸螢幕下的顯示效果，在這裡為大家介紹一個不錯的線上工具 – Responsivator，它可以模拟iPhone等各種不同裝置，并且還可以自定義不同尺寸螢幕的顯示效果，隻需要輸入一個url甚至是本地的一個 url（如），就可以看到網站在不同尺寸螢幕下的顯示效果。
8、通過Media Queries實作響應式布局設計
好了，我們明白了什麼是Media Query，那我們一起來運用到響應式布局的設計項目中去。設計思路很簡單，首先先定義在标準浏覽器下的固定寬度（假如标準浏覽器的分辨率為 1024px，那麼我們設定寬為980px），然後用Media Query來監測浏覽器的尺寸變化，當浏覽器的分辨率小于1024px的時候，則通過Media Query預設的樣式表來将頁面的寬度設定為百分比顯示，這樣子頁面的結構元素就會根據浏覽器的的尺寸來進行相對應的調整。同理，當浏覽器的可視區域改變 到某個值（假如為650px）的時候，頁面的結構元素根據Media Query預設的層疊樣式表來進行相對應的調整。看看我們的例子：
@media screen and （max-width： 980px） {
#wrap {width： 90%; margin:0 auto;}
#content {width： 60%;padding： 5%;}
#sidebar {width： 30%;}
#footer {padding： 8% 5%;margin-bottom： 10px;}
}
@media screen and （max-width： 650px） {
#header {height： auto;}
#searchform {position： absolute;top： 5px;right： 0;}
#content {width： auto; float： none; margin： 20px 0;}
#sidebar {width： 100%; float： none; margin： 0;}
}
通過上面我們就可以監測浏覽器的可視區域變化的是時候我們的頁面結構元素也會相對應的變化，當然你可以再多設定幾個尺寸的監測層疊樣式表，這樣子就可以根據不同尺寸裝置來進行響應式的布局。為了更好的顯示效果，我們往往還要格式化一些CSS屬性的初始值：
html {
-webkit-text-size-adjust： none;
}
article， aside， details， figcaption， figure， footer， header， hgroup， menu， nav， section {
display： block;
}
img {
max-width： 100%;
height： auto;
width： auto9;
}
.video embed， .video object， .video iframe {
width： 100%;
height： auto;
}
最後要注意的是在頁面的頭部<head></head>之間加上下面這句∶
<meta name=“viewport” content=“width=device-width; initial-scale=1.0”>
meta viewport這個屬性是在移動裝置上設定原始大小顯示和是否縮放的聲明。
參數設定∶
width – viewport的寬度
height – viewport的高度
initial-scale – 初始的縮放比例
minimum-scale – 允許使用者縮放到的最小比例
maximum-scale – 允許使用者縮放到的最大比例
user-scalable – 使用者是否可以手動縮放
最後對于在IE浏覽器中不支援media query的情況，我們可以使用Media Query JavaScript來解決，隻需要在頁面頭部引用css3-mediaqueries.js即可。示例：
<！--［if lt IE 9］>
<script src=“
</script> <！［endif］-->
好了，響應式布局的小事就這麼多，如你有好的補充意見或不同的見解，可以聯系我，我們一起探讨這件小事……