響應(yīng)式設(shè)計是Ethan Marcotte在2010年5月提出的概念幌蚊，這里的相應(yīng)值得是網(wǎng)頁能夠在不同尺寸和類型的設(shè)備上作出不同的表現(xiàn)阔籽。
一個經(jīng)過精心設(shè)計的響應(yīng)式頁面甫贯，可以在多種設(shè)備上提供舒適美觀涛漂、易于交互的界面和良好的用戶體驗，達到“Once write run everywhere”的效果氢橙。這個概念是為了服務(wù)移動互聯(lián)網(wǎng)而誕生的酝枢。
最初，響應(yīng)式設(shè)計的概念是用于CSS3中的充蓝，通過媒體查詢（Media Query）判斷設(shè)備類型隧枫，進而對不同的設(shè)備設(shè)置相應(yīng)的樣式表喉磁。
而在實際開發(fā)中谓苟，很多開發(fā)者也會使用JS對設(shè)備類型進行補充判斷，
比如使用JS可以精準判斷設(shè)備是安卓還是蘋果iOS系統(tǒng)协怒，這是CSS3媒體查詢無法做到的涝焙。
又因為可以通過JS獲取文檔元素并對其設(shè)置樣式，所以使用JS來控制設(shè)備的視圖表現(xiàn)也屬于響應(yīng)式設(shè)計孕暇。
媒體查詢
媒體查詢中最核心的內(nèi)容就是media仑撞。
media是一個關(guān)鍵字，我們通過它來判斷不同的設(shè)備類型妖滔，并在其代碼塊中預(yù)定義DOM元素的樣式隧哮。
當設(shè)備屬性符合一個media判定時，元素將采用其代碼塊中的樣式座舍。
語法
@media media_type and|not|only (exp) {
/* CSS代碼*/
}
其中沮翔，
-
media_type代表媒體類型，可選值如下
| 類型 | 解釋 |
|---|---|
| all | 所有設(shè)備 |
| braille | 盲文 |
| embossed | 盲文打印 |
| handheld | 手持設(shè)備 |
| 文檔打印或打印預(yù)覽模式 | |
| projection | 項目演示曲秉，如幻燈片 |
| screen | 彩色設(shè)備屏幕 |
| speech | 演講 |
| tty | 固定字間距的網(wǎng)絡(luò)媒體采蚀，如電傳打字機 |
| tv | 電視 |
-
exp為條件表達式疲牵，可用值如下
| 媒體特性 | 可采用的值 | 可用類型 | 可否min/max | 簡介 |
|---|---|---|---|---|
| width | <length> | 視覺屏幕/觸摸設(shè)備 | yes | 定義輸出設(shè)備中頁面可見區(qū)域?qū)挾?/td> |
| height | <length> | 視覺屏幕/觸摸設(shè)備 | yes | 定義輸出設(shè)備中頁面可見區(qū)域高度 |
| device-width | <length> | 視覺屏幕/觸摸設(shè)備 | yes | 定義輸出設(shè)備中頁面可見屏幕寬度 |
| device-height | <length> | 視覺屏幕/觸摸設(shè)備 | yes | 定義輸出設(shè)備中頁面可見屏幕高度 |
| orientation | portrait landscape | 位圖介質(zhì) | no | portait代表橫屏，landscape代表豎屏 |
| aspect-ratio | <ratio> | 位圖介質(zhì) | yes | 定義瀏覽器長寬比 |
| device-aspect-ratio | <ratio> | 位圖介質(zhì) | yes | 定義屏幕的長寬比 |
| color | <integer> | 視覺媒體 | yes | 定義輸出設(shè)備彩色原件數(shù)目榆鼠，如非彩色設(shè)備纲爸，值為0 |
| color-index | <integer> | 視覺媒體 | yes | 定義輸出設(shè)備的彩色查詢表中的條目數(shù)，如沒有使用彩色查詢表妆够，則值為0 |
| monochrome | <integer> | 視覺媒體 | yes | 定義在一個單色框架緩沖區(qū)中每像素包含的彩色原件個數(shù)识啦。如果不是單色設(shè)備，值為0 |
| resolution | <resolution> | 位圖介質(zhì) | yes | 定義設(shè)備的分表率神妹，如96dpi |
| scan | progressive/interlace | 電視類型 | no | 定義電視類設(shè)備的掃描方式袁滥，progressive表示逐行掃描，interlace表示隔行掃描 |
| grid | <integer> | 柵格設(shè)備 | no | 查詢輸出設(shè)備是否使用柵格或者點陣灾螃，1代表是题翻，0代表否 |
-
and、not腰鬼、only為連接符號嵌赠，含義如下
| 關(guān)鍵字 | 說明 |
|---|---|
| only | 限定某種設(shè)備 |
| and | 邏輯與，連接設(shè)備名或表達式 |
| not | 排除某種設(shè)備 |
| , | 表示設(shè)備列表 |
之后我們可以在引入樣式表文件時或在樣式表中直接使用媒體查詢熄赡，示例代碼如下：
<!-- 1. 引入位置 -->
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 415px), only screen and (max-device-width: 415px)" href="index.css"/>
<!-- 2. 樣式表中 -->
<style>
@media screen and (min-width: 415px) and (max-width: 1368px) {
.header {
height: 80px;
}
}
</style>
常見的手機屏寬不會超過415px姜挺，屏幕超過1368px的設(shè)備一般是大屏計算機，多為臺式機
JS布局
使用JS進行響應(yīng)式設(shè)計可以看作一記偏招彼硫，除了JS對設(shè)備類型的判斷更為精準之外炊豪，由于CSS缺乏成熟的計算體系（只憑calc是完全不夠的），在布局需要復(fù)雜計算時拧篮，JS也是必不可少的词渤。
下面看一個使用JS判斷設(shè)備類型（判斷設(shè)備使用iOS還是Android系統(tǒng)）的示例：
compoted: {
isAndroid () {
// navigator為瀏覽器內(nèi)置對象
// 此處通過navigator.userAgent獲取用戶的設(shè)備信息
let u = navigator.userAgent
return u.indexOf('Android') > -1 || u.indexOf('Adr') > -1
},
isIOS () {
let u = navigator.userAgent
// !!為兩次!的判定，當內(nèi)容不為（null串绩、undefined缺虐、空串等）時，判定為真
return !!u.match(/\(i[^;]+;(U;) ? CPU.+Mac OS X/)
}
}
這段代碼通過用戶的設(shè)備信息中是否含有特定關(guān)鍵字來判斷設(shè)備類型礁凡，這是一種極為常見的做法高氮，不過媒體查詢卻無法做到這一點。
之后我們可以根據(jù)這兩個計算屬性使用動態(tài)類名顷牌、動態(tài)樣式或直接使用JS等方式為DOM元素設(shè)置樣式剪芍。
