最近在工作中遇到一些讓人頭疼的問題——多媒體查詢，也就是大家所說的響應式布局（多終端適配）。在實際的開發過程中，響應式的設計使得多終端的適配變得非常方便，響應式展現的方式，更有一種組裝變形金剛的感覺，但也在實際工作中發現了許多問題：

　　一、開發思維變得復雜

　　在我們開發頁面的時候，思維無法專註於單一的PC端、移動端以及Pad端，開發每一個元素與版塊的時候，都需要考慮多終端適配；所以建議大家在接到這一類項目的時候，不要急於去開發，先把所有的終端頁面設計圖全部瀏覽的看一遍，不單單光是看，看的過程中腦海裏要有響應式開發的思路，不至於到後期花費大量的時間用於修改頁面。

　　二、牽一發而動全身

　　響應式的設計初衷是一次開發，多終端適配，但在實際的應用中，即使有通過判斷終端類型，而變換頁面內容甚至隱藏的方式，也無法應對用戶所提出的多終端之間的各種要求，而且每次需要修改一個頁面的元素或者局部板塊時，對於其他終端頁面的影響都會令人頭疼，因為考慮的內容較多，比如瀏覽器版本對於新技術的支持程度、不同版本間的BUG兼容、使用場景、屏幕的大小變化等等，顧忌太多，牽一發而動全身的特性無疑為後期維護增加了難度。

　　三、文件體積偏大
　　有時候為了適配多終端、多版本瀏覽器之間的兼容問題，需要為不同終端寫不同的代碼段，但如果通過一個頁面滿足多終端的個性化需求，這個頁面的代碼體積無疑是非常大的，對於PC端還好說，對於流量昂貴的移動終端這無疑是致命的。

說了這麽多問題，我們為什麽還要用響應式，響應式也有幾個優點：

1. 工作量少，網站、代碼、內容只需要一份，多出來的工作量只是JavaScript腳本、CSS樣式；
2. 每個設備都能得到正確的設計；
3. 搜索優化；
4. 數據調用簡單；

下面說一下響應式開發都需要做些什麽：

第一步：Meta標簽 (允許網頁寬度自動調整)

　　<meta name="viewport"
 
 content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

【viewport是網頁默認的寬度和高度，上面代碼的意思是，網頁寬度默認等於屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占屏幕面積的100%。】

（所有主流瀏覽器都支持這個設置，包括IE9。對於那些老式瀏覽器（主要是IE6、7、8），需要使用css3-mediaqueries.js。）
　　or
（ie8以及更早的瀏覽器不支持Media Query
可以使用media-queries.js或者respond.js來為IE添加Media Query支持）

第二步：HTML結構

註意：盡量不使用絕對寬度
由於網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素；
2）相對字體大小
字體可以不使用絕對大小（px），使用相對大小（em）。
body {
font: normal 100% Helvetica, Arial, sans-serif;
}

第三步：媒介查詢（css3 Media Query 媒介查詢）

　　方法一：
[email protected] screen and (max-width:1000px){
　　 content:{width:100%;}
　　}

　　方法二：

　　<link rel="stylesheet" media="screen and (max-width:640px)" href="">

媒體查詢能檢測的特性：

width : 視口寬度
height : 視口高度
device-width ：設備屏幕寬度
device-height : 設備屏幕高度orientation : 檢查設備處於橫向還是縱向
aspect-ratio : 視口寬度和高度的寬高比，例如：一個16：9比例的顯示屏可以這樣定義aspect-ratio : 16/9;
device-aspect-ratio : 設備屏幕寬度和高度的寬高比；
color : 每種顏色的位數，例如min-color:16會檢測設備是否擁有16位顏色；
color-index ：設備的顏色索引表中的顏色數，值必須是非負數的；
monochrome : 檢測單色幀緩沖區中每像素所使用的位數，值必須是非負數的，例如：monochrome : 2;
resolution : 用來檢測屏幕或打印機的分辨率，如min-resolution : 300dpi，每厘米像素點數的度量值，如min-resolution : 118dpcm;
scan : 電視機的掃描方式，值可設為progressive（逐行掃描）或者interlace（隔行掃描），如720p HD 電視（720p的p表示逐行掃描）,scan : progressive，而1080i HD 電視的i表示隔行掃描，匹配scan : interlace ; grid : 用來檢測輸出設備是網格設備還是位圖設備;

屏幕尺寸響應
　　1.固定布局
　　2.流動布局
　　3.自定義布局
　　4.柵格布局

　　分辨率：預設的分辨率有（可切換橫版，豎版）
　　普通智能手機：320×480
　　iPhone5：320×568
　　普通平板：800×600
　　iPad2、3、mini：768×1024
　　寬屏電腦：1280×800
　　HDTV：1920×1080

前端響應式開發