1、什么是媒體查詢
媒體查詢可以讓我們根據設備顯示器的特性（如視口寬度、屏幕比例、設備方向：橫向或縱向）為其設定CSS樣式，媒體查詢由媒體類型和一個或多個檢測媒體特性的條件表達式組成。媒體查詢中可用於檢測的媒體特性有 width 、 height 和 color （等）。使用媒體查詢，可以在不改變頁面內容的情況下，為特定的一些輸出設備定制顯示效果。
2、為什么響應式設計需要，媒體查詢
如果沒有CSS3的媒體查詢模塊，就不能針對設備特性（如視口寬度）設置特定的CSS樣式
3、如何在CSS文件中引入媒體查詢
媒體查詢寫在CSS樣式代碼的最后，CSS是層疊樣式表，在同一特殊性下，靠后的的樣式會重疊前面的樣式
4、怎樣使用media
一、
首先需要在html文檔中添加以下代碼，用來兼容移動設備的顯示效果
<meta name="viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
ps:
width=device-width:寬度等於當前設備的寬度
initial-scale=1：初始的縮放比例（默認為1）
maximum-scale=1：允許用戶縮放到得最大比例（默認為1）
user-scalable=no：用戶不能手動縮放
二、怎樣在CSS文件中寫CSS響應式媒體查詢
例:
@media screen and (max-width:720px) and (min-width:320px){
body{
}
@media screen and (max-width:320px){
body{
}
}
ps:該段媒體查詢的意思是：當設備屏幕寬度在320px——720px之間時，媒體查詢中body的背景色（）會重疊之前的body背景色，當設備屏幕寬度在320px以下時，媒體查詢中body的body背景色（background-color:blue;）會重疊之前的body背景色
如果你真的要做響應式布局響應到手機端的話，對於字體字號的選擇推薦使用rem做為單位，
設置如下：
html{font-size: 62.5%;}
使用的時候，如果你要設置一個16px的字號，用rem字號表示就是 1.6rem，font-size:2em; == font-size:20px;