一辩棒、什么是響應(yīng)式布局巡扇？
響應(yīng)式布局是Ethan Marcotte在2010年5月份提出的一個概念摊崭，簡而言之坪圾，就是一個網(wǎng)站能夠兼容多個終端——而不是為每個終端做一個特定的版本晓折。這個概念是為解決移動互聯(lián)網(wǎng)瀏覽而誕生的。
二兽泄、響應(yīng)式布局的優(yōu)點和缺點漓概？
優(yōu)點：
面對不同分辨率設(shè)備靈活性強
能夠快捷解決多設(shè)備顯示適應(yīng)問題
缺點：
兼容各種設(shè)備工作量大，效率低下
代碼累贅病梢，會出現(xiàn)隱藏無用的元素胃珍，加載時間加長
其實這是一種折衷性質(zhì)的設(shè)計解決方案，多方面因素影響而達不到最佳效果
一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)蜓陌，會出現(xiàn)用戶混淆的情況
三觅彰、響應(yīng)式布局的實現(xiàn)方式
使用CSS3中的Media Query（媒介查詢）
1、Media Query（媒介查詢）是什么钮热？
通過不同的媒體類型和條件定義樣式表規(guī)則填抬。媒體查詢讓CSS可以更精確作用于不同的媒體類型和同一媒體的不同條件。通過這個標簽屬性隧期，我們可以很方便的在不同的設(shè)備下實現(xiàn)豐富的界面飒责，特別是移動設(shè)備，將會運用更加的廣泛仆潮。
2宏蛉、media query能夠獲取哪些值?
設(shè)備的寬和高device-width，device-heigth性置。
渲染窗口的寬和高width拾并，heigth。
設(shè)備的手持方向鹏浅，橫向還是豎向orientation(portrait? /? lanscape)等辟灰。
畫面比例aspect-ratio等。
設(shè)備比例device-aspect-ratio等篡石。
對象顏色或顏色列表color芥喇，color-index。
設(shè)備的分辨率resolution凰萨。
3继控、語法結(jié)構(gòu)及用法
@media 設(shè)備名 only (選取條件) not (選取條件) and(設(shè)備選取條件)械馆，設(shè)備二{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"? ? ? rel="external nofollow"? /> 不是本站連接，不必計算權(quán)重
示例二：在樣式表中內(nèi)嵌@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}
在示例二中武通，設(shè)置了電腦顯示器分辨率（寬度）大于或等于1024px（并且最大可見寬度為989px）霹崎；屏寬在480px及其以下手持設(shè)備；屏寬在480px以及橫向（即480尺寸平行于地面）放置的手持設(shè)備冶忱；屏寬大于或等于480px小于1024px以及垂直放置設(shè)備的css樣式尾菇。
從上面的例子可以看出，字符間以空格相連囚枪，選取條件包含在小括號內(nèi)派诬，srules為兼容設(shè)置的樣式表，包含在中括號里面链沼。only（限定某種設(shè)備默赂，可省略），and（邏輯與）括勺，not（排除某種設(shè)備）為邏輯關(guān)鍵字缆八，多種設(shè)備用逗號分隔，這一點繼承了css基本語法疾捍。
三奈辰、實例
兩步走
第一步：設(shè)置 Meta 標簽
<meta name="viewpoint" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
第二部：通過媒介查詢media query來設(shè)置樣式
@media screen and (max-width: 980px) {
? #head { … }
? #content { … }
? #footer { … }
}
參考：http://www.jiawin.com/response-type-layout-design
? ? ? ? ? http://caibaojian.com/356.html
