基本的概念
一個網站可以兼容多個終端，針對不同終端設置不同的樣式。
優點：
- 面對不同分辨率設備靈活性強；
- 能夠快捷解決多設備顯示適用問題；
缺點：
- 兼容各種設備，效率低下；
- 代碼累贅；
實現響應式布局的三種方式
1. CSS3-Media Query（最簡單的方式，但是無法滿足很多需求）
2. 借助原生Javascript（成本高，不推薦使用）
3. 第三方開源框架（比如bootstrap,可以很好的支持瀏覽器的響應式布局）
設置meta標簽
在完成非響應式布局后，需設置meta標簽來告訴瀏覽器，讓視口寬度等於設備寬度，而且禁止用戶縮放行為。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
這里視口的設置需要注意的是，視口就是可見的屏幕尺寸；設置視口時只設置寬度，而不在乎高度，這是因為高度由內容自動撐開。
具體含義如下：
- Width: 控制viewport的大小。如device-width為設備的寬度。
- initial-scale: 初始縮放比例，頁面第一次加載時的縮放比例。
- maximum-scale 允許用戶縮放到的最大比例，范圍從0到10.0
- minimum-scale: 允許用戶縮放到的最小比例，范圍從0到10.0
- user-scalable： 用戶是否可以手動縮放，值可以是:
媒體查詢應當怎么寫呢？
CSS樣式分為：內聯式css樣式、嵌入式css樣式、外部式css樣式
媒體查詢 @media
媒體設備：all所有設備 screen所有屏幕設備（PC+移動端） print打印機設備。
媒體條件：指定在什么樣的條件下指定對應樣式 。
方式一：（嵌入式css樣式——這種是不推薦的，這樣會使得html頁面代碼太繁瑣）：
<style type="text/css">
@media screen and (max-width:768px){
//當屏幕寬度小於768px時，加載這里的樣式
}
@media screen and (min-width:368px){
//當屏幕寬度大於368px時，加載這里的樣式
}
@media screen and (min-width:300px) and (max-width:600px){
//當屏幕寬度大於300px且小於600px時，加載這里的樣式
}
@media all and (-webkit-device-pixel-ratio:2){
//二倍屏
}
</style>
方式二：（外部式css樣式）
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="./font_icons/fonts.css">
<link rel="stylesheet" type="text/css" href="./css/common.css">
<link rel="stylesheet" media="screen and (max-width:768px)" href="./css/phone.css" />
<link rel="stylesheet" media="screen and (min-width:768px)" href="./css/tablet.css" />
<link rel="stylesheet" media="screen and (min-width:1024px)" href="./css/desktop.css" />
<link rel="stylesheet" media="screen and (min-width:1200px)" href="./css/desktop_hd.css" />
</head>
注：書寫順序一定不能差
在真實項目中，設計師的設計稿一般是：640*1136 或 640*960 或 750*1334。
CSS3中的媒體查詢，可以在不同分辨率下對元素重新設置樣式（不只是尺寸），在不同屏幕下可以顯示不同版式。
@media screen and (min-width:480px) 手機
@media screen and (min-width:768px) 平板
@media screen and (min-width:992px) 桌面顯示器
@media screen and (min-width: 1200px){ 選擇器{ 屬性：值; } } 大於1200px時
這四個值是常用的，注意先后順序，小的在前大的在后。
手機類型： 分辨率
小米3 1080*1920
小米2 720*1280
紅米Note 720*1280
魅族4 1152*1920
魅族3 1080*1800
魅族2 800*1280
iphone6 750*1334
iphone5s 640*1136
iphone4s 480*800
iphone3s 320*480
三星 720*1280
三星 480*800
響應式的技術實現？
1.流體布局
其實就是度量單位的改變。在響應式設計的布局中，不在把像素(px)作為唯一的單位，而是采用%或者是混合%、px為單位，設計出自己想要的布局方式。
2.媒體查詢
媒體查詢可以在你根據特定的環境下查詢到各種屬性---------比如設備類型，分辨率、屏幕物理尺寸以及色彩等。通過使用媒體查詢，可以獲得設備的一些特性，以及響應式的布局方案。
3.彈性圖片
其實在做響應式布局時，大多用到的是彈性盒子進行布局，那么在設置圖片的地方也應該具有一些變化以適應布局的變化。出了圖片外，像圖標啦！視頻啦也應做一些調整用以適應布局的變化。
流式布局法
- 容器或者盒子的寬度一般都不是固定的值，而是使用百分比，相對於視口區域的百分比。
- 其余的樣式：字體、高度、margin、padding等等都按照設計稿上標注尺寸的一半來設置。
- 對於有些屏幕尺寸下，設置的固定值不是特別好看的話，使用@media進行微調整。
圖片處理
1. 對於背景圖片來說，css3有個屬性 background-size可以等比例縮放背景圖片。
但是對於小屏幕的移動設備去加載大背景圖片的話，有缺點的，最主要的缺點是要更大的帶寬，浪費流量。所以我們要想做的更好的話，可以使用媒體查詢根據設備的寬度來渲染不同大小的背景圖片。
對於頁面上的<img/>標簽圖片的話：
1. 如果只是頁面上靜態圖片的話，不考慮帶寬的情況下，可以使用width=100%”等比例縮放，如：<img src=”XX.png” width=”100%”/>
2. 如果是商品圖或者頁面上有多個的話，考慮不浪費不必要的帶寬，需要后台根據不同的設備寬度大小來返回不同的json數據的圖片來給我們前端，之后我們前端使用JS動態的渲染出來。
帶寬是手機端必須要考慮的問題，如果將PC端上的大圖放在手機端，手機用戶請求圖片文件時，文件體積大，消耗流量多，請求事件長，這樣的用戶體驗一定不好。所以就得把圖片也處理成響應式的，根據終端類型尺寸分辨率來適配出合理的圖形。
有兩個解決方案，一個是看到有文章介紹的W3C的一個用於響應式圖形的草案：新定義標簽<picture>，因為是草案可以學習學習，這里就不贅述了，自行百度谷歌bing吧~ 另一個方案是圖片液態化。
在html頁面中的圖片，可以通過css樣式max-width來進行控制圖片的最大寬度。img { max-width:100%; }
含義是：確保圖片的最大寬度不會超過瀏覽器的窗口或其容器可視部分的寬度，所以當窗口或容器的可視部分變窄時，圖片的最大寬度值也會相應的變小，圖片本身永遠不會覆蓋容器。
理解css單位px，em，rem的區別
1. Px是css中最基本的長度單位，在PC端，設計稿多少像素，頁面css就寫多少像素。
2. em 是相對單位，相對於上下文元素而言，一般情況下，瀏覽器默認的字體大小是16px，也就是1em等於16px；比如：
3. rem也是相對單位。rem是相對於html根元素來計算的，這就是說只要在根節點設定好參考值，那么全篇的1rem都相等，計算方式同 em，默認1rem=16px; 同理你可以 設定html { font-size:62.5% } 那么1rem就等於10px，以此類推。。。
比如設置html根元素 如下代碼：
html {font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/}
當一個p元素是24px的話，那么轉換成rem為單位的話，那么只需要如下這樣寫即可：
p {font-size: 2.4rem; /*2.4 × 10px = 24px */ }
元素未知寬度居中
我們先來介紹一下未知寬度，元素居中的方法，對於響應性web設計是有幫助的，我們可以來了解下。
第一種方法：
假如頁面html結構如下：
<div>
<p>What is CSS?</p>
</div>
只需要給父級元素div 設置 文本對齊是 居中對齊。子元素設定display:inline-block即可。如下代碼：
div{text-align:center}
p{display:inline-block}
第二種方法如下：
div{position:relative; left:50%; float:left;}
p{position:relative; left:-50%;}
需要注意的細節點
本文開始也說過，響應式布局的關鍵不僅僅在於布局，更多的是細節需要去考慮。也就是兼容性問題、字體尺寸單位、視口寬高的設置、圖片的處理、表單的處理…
1、兼容性問題
IE6、IE7、IE8是不支持媒體查詢的。
解決方案：css3-mediaqueries.js。引入此文件可以解決IE6-8無法實現響應式媒體查詢的尷尬。
2、字體尺寸單位
css3引入了新的單位叫做rem，rem是相對於根元素的，不要忘記重置根元素字體大小
html{font-size:100%;}
完成后，就可以定義響應式字體：
@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:1.5rem;}}
3、視口寬高的設置
不同設備，不同寬度。寬度不固定，可以使用百分比。
做移動端項目之前的准備
常用的META標簽(移動端)
忽略數字自動識別為電話號碼：
<meta name="format-detection" content="telephone=no"/>
把頁面增加到桌面主屏幕：
在蘋果手機的Safari瀏覽器中訪問一個頁面，用戶可以通過“添加到桌面”這一操作把網頁保存到自己的主屏幕桌面上（就像安裝一個APP，在主屏幕上就會有一個操作的圖標），這樣下一次可以直接點擊圖標打開頁面。(只對IOS有效)
WebApp全屏模式：
<meta name="apple-mobile-web-app-capable" content="yes"/>
設置狀態欄顏色：
只有在開啟WebApp全屏模式下才能起到效果。content的值為 default(狀態欄將為正常的，即白色，網頁從狀態欄以下開始顯示) | black(狀態欄將為黑色，網頁從狀態欄以下開始顯示) | black-translucent(狀態欄將為灰色半透明，網頁將充滿整個屏幕，狀態欄會蓋在網頁之上)。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
添加到主屏后的圖標：
<link href="圖片的地址" sizes="114x114" rel="apple-touch-icon-precomposed"/>
IOS系統中對ICON有一套規范，就是在IOS設備的圖標統一為“四邊圓角”、“高光處理”。至於“圖標陰影”，是IOS設備中統一為所有桌面元素增加的，所以不作為圖標單獨處理的樣式。rel=”apple-touch-icon-precomposed”是設定按照設計稿原圖的圖標顯示，rel=”apple-touch-icon”是設定在原圖的基礎上增加一些高光光亮效果。一般來說我們的ICON的尺寸是114x114。
添加到主屏后的標題：
<meta name="apple-mobile-web-app-title" content="標題"/>
添加智能App廣告條 Smart App Banner(不常用)：
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"/>
QQ瀏覽器(X5內核)獨有的META：
<meta name="x5-orientation" content="portrait|landscape"/> //->設置屏幕方向 <meta name="x5-fullscreen" content="true"/> //->設置全屏
UC瀏覽器獨有的META：
<meta name="screen-orientation" content="portrait|landscape"/> //->設置屏幕方向 <meta name="full-screen" content="true"/> //->設置全屏 <meta name="viewport" content="uc-fitscreen=no|yes"/> //->縮放不出現滾動條 <meta name="nightmode" content="enable|disable"/> //->夜間模式
強制圖片顯示：UC瀏覽器為了節省流量，為用戶提供了無圖模式，但是如果頁面的圖片是必不可少的，如驗證碼的，需要強制瀏覽器顯示圖片，可以設置imagemode。通過META設置圖片加載方式會作用於整個頁面，如果希望對單個圖片進行設置，那么可以使用這個<img src="" show="force"/>
<meta name="imagemode" content="force"/>
使用了application這種應用模式后，頁面講默認全屏，禁止長按菜單，禁止收拾，標准排版，以及強制圖片顯示。
<meta name="browsermode" content="application"/>