一句話概括響應式網頁設計
如果要用一句話概括響應式網頁設計，我覺得它是針對任意設備對網頁內容進行完美佈局的一種顯示機制。
響應式網頁設計這個術語還有一堆表示相同意思的其他叫法，如流式設計、彈性佈局、塑料佈局、流體設計、自適應佈局、跨設備設計以及彈性設計。
進入了響應式網頁設計的教堂，就不要再迷戀像素（px）這個度量單位，因爲大多數情況下我們不會用像素，而會使用相對度量單位（em 或百分比）。
阻止移動端縮放頁面
iOS 和Android 瀏覽器都基於WebKit核心。這兩種瀏覽器以及很多其他瀏覽器（如Opera Mobile），都支持用viewport meta元素覆蓋默認的畫布縮放設置。
只需要在HTML 的<head>標籤中插入一個<meta>標籤。<meta>標籤中可以設置具體的寬度（如像素值）或者縮放比例如2.0（設備實際尺寸的兩倍）。下面是一個將頁面放大到設備實際尺寸兩倍顯示的meta 標籤的示例：
<meta name="viewport" content="initial-scale=2.0,width=device-width" />
我們來分析一下上面所示的<meta>標籤，以理解它的工作原理。
name="viewport"屬性不言而喻。content="initial-scale=2.0的意思是將頁面放大兩倍（同理，0.5 表示縮小一半，3.0 表示放大3 倍），同時width=device-width 告訴瀏覽器頁面的寬度應該等於設備寬度。
<meta>標籤還可以控制頁面可縮放的範圍。下面的代碼允許用戶將頁面最多放大至設備
寬度的3 倍，最小壓縮至設備寬度的一半。
<meta name="viewport" content="width=device-width, maximum-scale=3, minimum-scale=0.5" />
你還可以禁止用戶縮放，不過縮放是一個重要的輔助功能，所以在實踐中很少禁用。
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
user-scalable=no即是禁止縮放。
現在，我們將縮放比例設置爲1.0，這表示瀏覽器將按照其視口的實際大小來渲染頁面。
將寬度設置爲設備寬度，意味着支持該特性的瀏覽器都將會按照設備寬度的實際大小來渲染頁面。下面是我們最終將要使用的<meta>標籤：
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
媒體查詢
視口和屏幕尺寸
視口和屏幕尺寸不是同一個概念。視口是指瀏覽器窗口內的內容區域，不包含工具欄、標籤欄等。也就是網頁實際顯示的區域。屏幕尺寸指的是設備的物理顯示區域。
使用下面的樣式，然後改變窗口大小觀察網頁
body {
background-color: grey;
}
@media screen and (max-width: 960px) {
body {
background-color: cadetblue;
}
}
@media screen and (max-width: 768px) {
body {
background-color: blanchedalmond;
}
}
@media screen and (max-width: 550px) {
body {
background-color: aliceblue;
}
}
@media screen and (max-width: 320px) {
body {
background-color: antiquewhite;
}
}
爲方便查閱，下面列出了常用媒體查詢檢測的特性。
- width：視口寬度。
- height：視口高度。
- device-width：渲染表面的寬度（對我們來說，就是設備屏幕的寬度）。
- device-height：渲染表面的高度（對我們來說，就是設備屏幕的高度）。
- orientation：檢查設備處於橫向還是縱向。
- aspect-ratio：基於視口寬度和高度的寬高比。一個16∶9 比例的顯示屏可以這樣
定義aspect-ratio: 16/9。 - device-aspect-ratio：和aspect-ratio 類似，基於設備渲染平面寬度和高度的
寬高比。
在上述所有特性中，都可使用min 和max 前綴來創建一個查詢範圍。
用媒體查詢改造我們的設計
毫無疑問，你肯定知道CSS 代表層疊樣式表。所謂層疊，就是指樣式表中後面的樣式會覆蓋前面相同的樣式（除非前面的樣式具有更高的針對性）。因此我們可以在樣式表的開頭設置基本樣式，以便適應所有設計，然後使用媒體查詢來進一步重寫相應的部分。例如，先針對大視口設計（用戶大多數情況下使用鼠標），然後再針對較小的視口，使用媒體查詢重寫這部分樣式。
加載媒體查詢的最佳方法
現代瀏覽器雖然可以智能地忽略與自身不匹配的樣式文件，但它卻不一定不下載這些文件。因此，將不同媒體查詢的樣式保存到獨立的文件中沒有太大好處（個人喜好或爲便於組織代碼除外）。
因爲使用多個獨立的文件會增加用於頁面渲染的HTTP 請求數量，從而導致頁面加載變慢。因此，建議在已有的樣式表中追加媒體查詢樣式。使用如下語法即可在已有樣式表中加入媒體查詢：
@media screen and (max-width: 768px) {/*樣式*/}
媒體查詢的缺陷
目前的情形是，針對各種視口的排列組合編寫對應的CSS 樣式，無法兼容未來可能出現的設備；而一個完美的設計，往往能在一定程度上適應未來的發展。在這點上我們目前的解決方案尚不完備。目前的效果更像是一個自適應設計，而不是我們想要的真正的響應式設計。我們的設計應該在突變之前保持靈動。要做到這點，需要將呆板的固定佈局修改成靈活的流動佈局。
擁抱流式佈局
爲什麼響應式設計需要百分比佈局
在認識到媒體查詢威力無比的同時，我們也要看到它的侷限性。那些僅使用媒體查詢來適應不同視口的固定寬度設計，只會從一組CSS 媒體查詢規則突變到另一組，兩者之間沒有任何平滑漸變。我們想要的是一個靈活的設計，能在所有視口中都完美顯示，而不僅僅只針對媒體查詢設定的一些固定視口。
所以我們需要將固定像素佈局轉換成靈活的百分比佈局。這樣才能讓頁面元素根據視口大小在一個又一個媒體查詢之間靈活伸縮修正樣式。
用em 替換px
em 的實際大小是相對於其上下文的字體大小而言的。
如果我們給<body>標籤設置文字大小爲100%，給其他文字都使用相對單位em，那這些文字都會受 body上的初始聲明的影響。這樣做的好處就是，如果在完成了所有文字排版後，客戶又提出將頁面文字統一放大一點，我們就可以只修改body 的文字大小，其他所有文字也會相應變大。
值得注意的是，現代瀏覽器的默認文字大小都是16 像素（顯式聲明的除外）。因此一開始給body 標籤應用下列任何一條規則所產生的效果都一樣：
font-size: 100%;
font-size: 16px;
font-size: 1em;
em 究竟是什麼？
em是書面形式的大寫字母“M”的簡稱，發音和M相同。以前，“M”常被用來測定某種字體的大小，因爲它是英文字母中最大（最寬）的字母。
如今，em 作爲一個測量單位，指的是特定字母的寬度和高度相對於特定字體磅值的比例。
max-width 屬性
實現圖片隨着流動佈局相應縮放非常簡單，只需在CSS中作如下聲明：
img {
max-width: 100%;
}
這樣就可以使圖片自動縮放到與其容器100%匹配。更進一步，可以將同樣的樣式應用到其他多媒體標籤上。如：
img,object,video,embed {
max-width: 100%;
}
現在圖片可以隨着視口的伸縮而縮放了。但是如果將視口拉大，直到圖片拉伸至超出其原始尺寸，那問題就麻煩了。
假設圖片的實際寬度是300像素，我們可以通過追加另一個特定樣式來爲圖片設置閾值：
width: 100%;
max-width: 300px;
這樣就可以保證圖片按照通用的圖片樣式自由縮放，但又絕不會超出max-width屬性設置的最大上限。
把背景圖片放在其他地方
過去，我通常將所有圖片都放在一個名如images或img 的文件夾中，不論是用做CSS 背景的圖片，還是通過標籤插入的圖片。但是在使用自適應圖片方案時，建議將那些用於CSS 的背景圖片（或者那些你不想被縮放的圖片）放在另一個目錄。
自適應圖片方案默認爲此創建的目錄是assets。如果你不想縮放某張圖片，把它丟進這個文件夾即可。
流動網格佈局和媒體查詢的默契配合
使用百分比佈局創建流動的彈性界面，同時使用媒體查詢來限制元素的變動範圍。將這兩者組合到一起構成了響應式設計的核心，基於此可以創造出真正完美的設計。
@media screen and (min-width: 1001px) and (max-width: 1080px) {
#navigation ul li a { font-size: 1.4em; }
}
@media screen and (min-width: 805px) and (max-width: 1000px) {
#navigation ul li a { font-size: 1.25em; }
}
@media screen and (min-width: 769px) and (max-width: 804px) {
#navigation ul li a { font-size: 1.1em; }
}
我們根據視口寬度來改變文字大小。這是媒體查詢和流動佈局和諧共存的又一證據：媒體查詢約束流動佈局的變動範圍，而流動佈局則簡化了從一組媒體查詢樣式過渡到另一組的改變過程。
私有前綴及其用法
示例：
.round{
-khtml-border-radius: 10px; /* Konqueror */
-rim-border-radius: 10px; /* RIM */
-ms-border-radius: 10px; /* Microsoft */
-o-border-radius: 10px; /* Opera */
-moz-border-radius: 10px; /* Mozilla (如Firefox) */
-webkit-border-radius: 10px; /* Webkit (如Safari 和Chrome) */
border-radius: 10px; /* W3C */
}
樣式表中後出現的屬性優先級高於之前出現的同名屬性。正是由於這種層疊，我們就可以先列出私有前綴屬性，最後使用無前綴的屬性來修正，以確保當該特性被完全實現時，瀏覽器會運行正確的效果。
漸進增強與優雅降級
你可能聽過“漸進增強”和“優雅降級”這兩個詞，下面是對他們的理解。
優雅降級指的是爲現代瀏覽器製作網站，然後保證爲某些老版本瀏覽器提供基本可用的體驗。新特性在老版本瀏覽器中會降級，且一般會有一個分界點，聲明不支持那些老掉牙的瀏覽器。有些時候用戶也僅會被警告他們所使用的瀏覽器有問題，建議其更換（如“建議下載最新版瀏覽器！”）。
漸進增強與優雅降級恰好相反。漸進增強以恪守Web 標準的標籤爲基礎，意味着它在所有瀏覽器中均可用。然後通過CSS 樣式和必要的JavaScript 來爲更先進的瀏覽器提供漸進式的增強體驗。
目前，漸進增強被普遍認爲是開發網站的最佳實踐。然而很多情況下可以說都是用優雅降級的方式來做的。
瞭解條件註釋
這是一種非常簡便的方法，可用來爲相應版本的IE 加載CSS或JS 文件（甚至是內容）。其他瀏覽器會將這些代碼看做註釋而直接忽略。
像下面這樣：
<!--[if lte IE 8]>
<script src="js/respond.min.js"/></script>
<![endif]-->
在本例中，我們的條件註釋是說：“如果你的瀏覽器版本低於或等於（lte）IE8，就執行其中的代碼。”
相較於功能檢測來說，條件註釋並不太受歡迎，因爲要使用IE 特有的條件註釋來污染我們的標籤代碼。