響應(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è)備類型，并在其代碼塊中預定義DOM元素的樣式。
當設(shè)備屬性符合一個media判定時，元素將采用其代碼塊中的樣式。
語法
@media media_type and|not|only (exp) {
/* CSS代碼*/
}
其中，
-
media_type代表媒體類型，可選值如下
| 類型 | 解釋 |
|---|---|
| all | 所有設(shè)備 |
| braille | 盲文 |
| embossed | 盲文打印 |
| handheld | 手持設(shè)備 |
| 文檔打印或打印預覽模式 | |
| 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是完全不夠的），在布局需要復雜計算時，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è)置樣式。
