響應式網站設計？
- 響應式網站設計，能讓你的頁面在所有客戶端瀏覽器上表現的都非常好。
- 響應式網站只要有HTML和CSS就可以了。當然如果有特殊要求，適當加入js也是有必要的。
什么是視口？
就是用戶能看到的頁面可見區域就叫視口。
在平板電腦和手機出現之前，網頁只為電腦屏幕而設計。 那個年代，一個頁面往往只有一種布局，固定的尺寸。
后來平板電腦和手機出現之后，為了能更好的顯示頁面，起初瀏覽器廠商的解決方案是提供一個自動縮放的功能。把pc頁面縮放到手機屏幕那么大。盡量讓頁面全部顯示出來。 感覺還不錯。畢竟內容全部顯示了。
但是默認情況下，頁面文字很小。小的可憐，幾乎看不見。 很快，響應式網站的設計方案也緊羅密布地制定開來。 各大瀏覽器廠商開始制定統一標准。以推進響應式網站的發展。
設置視口
做響應式網站的時候，一定要在頁面頭部加入如下的聲明：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
具體一點就是：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<title></title>
</head>
<body></body>
</html>
在 HTML 中，meta 標簽沒有結束標簽，meta標簽定義了與文檔相關聯的名稱或值。可提供有關頁面的元信息。
width=device-width 樣式中定義的寬度等於設備中定義的寬度
initial-scale=1.0 縮放比例1
minimum-scale=1.0 最大縮小比例1
maximum-scale=1.0 最大放大比例1
上段代碼的最終作用是，移動客戶端會按你設定的尺寸來顯示頁面。並且比例是1，不可通過手勢放大縮小。 如果不寫這段代碼，移動客戶端的瀏覽器真的會以它的1px來顯示你設定的1px。最終效果是被縮放的效果，字小小的那種。 總之，做響應式網站的時候記得至少要加上如下聲明。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
今天的主題：什么是Media Query？
CSS2允許用戶對特定media類型制定樣式。
例如： 針對screen（屏幕）用 @media screen{ ... }里設定的樣式。 針對打印樣式用 @media print{ ... } 里的樣式。
CSS3提供了更加強大的功能。 可以針對不同media類型設置樣式，還根據設定的寬度或者高度指定樣式。
咱看下面的例子：
@media screen and (max-width: 500px) {
body { background-color: black; }
}
意思就是： 當屏幕的寬度小於等於500px的時候body的背景顏色為黑色。
平時可用如下口訣幫助記憶：
“當” ，這個時候寫 @media “屏幕”，
寫screen “的最大寬度為”， and (max-width:) “500px”，
max-width:后加上500px “的時候”，
這個時候加上大括號。
拼在一起就是： @media screen and (max-width: 500px) {} 然后大括號里就寫我們要設定的樣式。
是不是很容易記憶？多寫幾遍就會了。
相關英語
viewport = 視口
content = 內容
device-width = 設備寬度
initial-scale = 初始-比例
minimum-scale = 最小-比例
maximum-scale = 最大-比例
media = 媒體
query = 查詢