前言
響應式web設計這兩年比較熱，主要還是因為移動設備瀏覽器的使用量已經快速增長並未來很大可能超過PC端，也就是說，未來網頁的瀏覽終端越來越多樣化，用戶可以通過桌面電腦，筆記本，平板，智能手機甚至寬屏電視來瀏覽網站。所以說， 讓一個網站能在各種設備上友好地呈現確實很重要，這也是做前端需要掌握的。但是現在很多網站還是使用固定寬度布局，最常見的就是960像素。這種固定寬度設計在筆記本上顯示剛好，但是在一些桌面大屏幕上兩邊留白很多，而且加上現在移動設備層出不窮，用戶更趨於使用移動設備來瀏覽網頁。因此，響應式web設計就變得尤為重要。
概念
響應式web設計是指我們設計與開發的頁面可以根據用戶的行為（比如改變瀏覽器的窗口大小）和不同的設備環境（比如系統平台、屏幕分辨率以及橫豎屏等）做出相應的響應來調整頁面的布局，以提供用戶可感知的、流暢的閱讀和操作體驗。響應式設計一般遵循“設計先行，內容優先，移動優先”的原則。就是說，如果一個頁面想要響應PC端和移動終端包括用戶的一些行為等，那么設計師至少需要設計兩套以上頁面的設計圖（PC端一套，移動終端一套），交互設計師也需先根據終端進行交互設計，把需求中最重要的內容展示在移動小屏幕上，然后前端工程師據此設計開發出響應式框架。而目前最好的實踐方式是采用流式布局，彈性布局加媒體查詢。更加詳細的介紹資料請自行查閱！
流式布局
流式布局是利用一套靈活的流體網格系統搭建網站的布局。在固定布局中我們使用絕對度量單位像素px來布局，而在流式布局中使用相對度量單位百分比（%）來進行布局。這么做的好處是會根據視窗的不同寬度按比例來進行動態地調整網格的寬度。
那么如果將固定布局變成流式布局呢，這里有一條公式：
目標元素寬度 / 上下文元素寬度 = 百分比寬度
舉個簡單的例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>流式布局</title> <style type="text/css"> /**固定布局* #wrapper{ width: 960px; margin: 0 auto; } #content{ width: 630px; margin-top:50px; margin-left: 10px; } #sidebar{ width: 285px; border-left: 5px solid #ddd; margin-top:50px; margin-left: 10px; margin-right: 10px; padding-left: 10px; }*/ /**流式布局**/ #wrapper{ width: 96%; /*最外層容器，相對於視口尺寸，將其設置為96%，也可以100%，根據自己的需要*/ margin: 0 auto; } #content{ width: 65.625%; /*630 / 960*/ margin-top:50px; margin-left: 1.041667%; /*10 / 960*/ } #sidebar{ width: 29.6875%; /*285 / 960*/ border-left: 5px solid #ddd; margin-top:50px; margin-left: 1.041667%; /*10 / 960*/ margin-right: 1.041667%; /*10 / 960*/ padding-left: 1.041667%; /*10 / 960*/ } </style> </head> <body> <div id="wrapper"> <div id="content">主要內容</div> <div id="sidebar">側邊欄</div> </div> </body> </html>
上面的例子應該很直觀吧，運用該公式就可以計算出來。注意一點就是內外左右邊距也應該根據上面的公式計算成百分比，至於邊框的話，如果不想使其隨上下文寬度改變而改變的話，可以將側邊欄寬度減去邊框寬度，這樣邊框就始終保持設置的像素了。流式布局雖好，但也有不足之處，就是在處理內外上下邊距（比如margin-top），行高，字體大小等方面不是很好，在大屏幕太大，在小屏幕太小。所以就需要使用彈性布局來解決這些問題。
彈性布局
彈性布局主要是使用相對度量單位em。em的實際大小是相對於其上下文的字體大小而言的。還有一個相對單位rem，它是相對於根元素的大小而言的。也支持如下公式：
目標元素尺寸 / 上下文元素尺寸 = 百分比尺寸
例如：現代瀏覽器默認文字大小為16px，如果#wrapper里我們設置了font-size:32px，則我們計算32px / 16px = 2em 。故我們可以設置為 font-size：2em 。此時我們在#wrapper里加上一個<h1>標簽，我們想要將它字體大小設置為48px，則計算 48px / 32px = 1.5em ，故可將其設置為h1{font-size:1.5em;}，以此類推。
彈性圖片：在現代瀏覽器（包括IE7+）中要實現圖片隨着流式布局相應縮放很簡單，只需要聲明：
img{ max-width : 100%;}
這樣就可以使圖片與容器自動匹配了。當然如果同時有兩張圖片並排展示，那么就改成50% 。這樣雖然很簡單就實現了我們想要的效果，但是前提是得准備一張大圖片，至於怎么優化方法還是不少，這里就不講了，請自行搜索！
現在已經有很多CSS網格框架，比如 Less Framework 、The 1140 CSS Grid 等等。 大家可以自行搜索。
媒體查詢
標准還是請看W3C：http://www.w3cschool.cc/cssref/css3-pr-mediaquery.html ，里面對媒體類型和媒體特性有詳細的介紹。其中最常見的三種媒體類型是Screen 、All 和 Print 。
瀏覽器支持：
常見的媒體類型引入方法主要有：link 標簽引用，xml方式，@import 和 CSS3的@media 。但主要還是link 標簽引用 和 CSS3的@media ，如果考慮減少HTTP請求的話，那就使用CSS3的@media查詢。
link方法，舉例如下：
<link rel="stylesheet" type="text/css" href="style.css" media="print"> <link rel="stylesheet" type="text/css" href="style.css" media="screen and (max-width:768px)"> <link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width:640px)"> <link rel="stylesheet" type="text/css" href="style.css" media="all and (min-width:768px) and (max-width:1024px)">
@media方式，舉例如下：
@media screen and (max-width: 768px){ /*樣式代碼*/ } @media screen and (min-width: 640px){ /*樣式代碼*/ } @media screen and (min-width: 768px) and (max-width: 1024px){ /*樣式代碼*/ }
@media引入媒體類型有兩種方式：
1.在樣式文件中引用媒體類型
2.在<head>標簽中的<style>中引用
常用的媒體特性：
| 屬性 |
值 |
是否有Min/Max前綴 |
描述 |
| color | 整數 | 有 | 每種色彩的字節數 |
| color-index | 整數 | 有 | 色彩表中的色彩數 |
| device-aspect-ratio | 整數 / 整數 | 有 | 寬高比例 |
| device-height | length | 有 | 設備屏幕的輸出高度 |
| device-width | length | 有 | 設備屏幕的輸出寬度 |
| grid | 整數 | 沒有 | 是否基於柵格的設備 |
| height | length | 有 | 渲染界面的高度 |
| monochrome | 整數 | 有 | 單色幀緩沖器中每像素字節 |
| resolution | 分辨率（dpi / dpcm） | 有 | 分辨率 |
| scan | progressive interlaced |
沒有 | 電視機類型設備的掃描方式，progressive表示逐行掃描，interlace表示隔行掃描 |
| width | length | 有 | |
| orientation | portrait landscape |
沒有 | 窗口的方向是縱向還是橫向 |
只要根據@media 媒體類型 and (媒體特性) { 樣式代碼 } 來使用即可。 若有不同媒體查詢使用同一樣式，則使用逗號隔開。
not關鍵詞：排除某種制定的媒體類型
@media not screen and (max-width: 768px){ /*排除小於等於768px寬度的媒體類型*/ }
only關鍵詞：指定某種特定的媒體類型
@media only screen and (min-width: 640px){ /*只支持大於等於640px寬度的媒體類型*/ }
實踐
1.在<head>標簽內引入：
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1, user-scalable=no" /> <meta name="format-detection" content="telephone=no,email=no" />
第一句設置設備的寬度為視圖的寬度，也就是禁止其默認的自適應頁面的效果。
第二句設置禁止手機將頁面上類似手機號碼的數字串轉換成可以撥打電話。
可視區域meta標簽的content屬性值：
| content屬性值 | 描述 |
| width | 可視區域的寬度，其值可以是一個具體數字或關鍵詞device-width |
| height | 可視區域的高度，其值可以是一個具體數字或關鍵字device-height |
| initial-scale | 頁面首次被顯示時可視區域的縮放級別，取值1.0時表示頁面按實際尺寸顯示，無縮放 |
| minimun-scale | 可視區域的最小縮放級別，表示用戶可以將頁面縮小到程度 |
| maximun-scale | 可視區域的最大縮放級別，表示用戶可以將頁面放大到程度 |
| user-scalable | 指定用戶是否可以對頁面進行縮放，yes / no |
2.由於IE6~IE8不支持CSS3的媒體查詢，故需要加上以下這句以讓它們支持：
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
當然也可以下載下來后在本地引用：https://github.com/scottjehl/Respond/
3.重置好樣式：推薦使用 Normalize.css ：http://necolas.github.io/normalize.css/
4.采用流式布局加彈性布局，布局要語義化
5.使用媒體查詢設置主要斷點：
@media screen and (min-width: 320px){ } @media screen and (min-width: 480px){ } @media screen and (min-width: 640px){ } @media screen and (min-width: 768px){ } /*有必要的話設置高於1024px*/ @media screen and (min-width: 1024px){ }
當然視情況根據需要可以設置次要斷點，不過維護樣式的工作量和成本會增加，根據需要自行決定。那么現在我們就可以根據我們的斷點來編寫不同的樣式，使我們的網站在不同設備上能友好地呈現。
PS：OK，這里只是簡單地將知識點總結一下，想要更深入的學習還請另找學習資料或看書。