媒體查詢多用於響應式網頁。
1.初始化設定：
在HTML檔案中，網頁頂部
標籤中插入一句話：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
這句話在於對響應式網頁做一個初始化設置，主要包括：
name="viewport"：標記顯示裝置為視窗；
width = device-width：寬度等於目前裝置的寬度；
initial-scale：初始的縮放比例（預設為1.0）；
minimum-scale ：允許使用者縮放到的最小比例（預設為1.0）；
maximum-scale：允許使用者縮放到的最大比例（預設為1.0）；
user-scalable：使用者是否可以手動縮放（預設為no，因為我們不希望用戶放大縮小頁面）。
2.解決IE瀏覽器的相容性問題：
因為IE瀏覽器(IE8)不支援HTML5和CSS3中的media，所以要載入用於解決IE瀏覽器相容性問題的JS檔案：
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
兩個<script></script>標籤中的src屬性所指向的文件連結地址為固定地址中的文件，直接異地引用就好，不用下載到本地引用。
3.設定IE的渲染方式為最高：
現在有很多人的IE瀏覽器都升級到IE9以上，這個時候會有很多詭異的事情發生，例如現在是IE9的瀏覽器，但是瀏覽器的文件模式卻是IE8，為了防止這種情況，我們需要下面這段程式碼來讓IE的文檔模式永遠都是最新：
<meta http-equiv="X-UA-Compatible" content="IE=edge">
當然還有一個更給力的寫法：
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
這段程式碼後面加了一個chrome=1，這是由於Google Chrome Frame（Google內嵌瀏覽器框架GCF），如果使用者電腦安裝這個chrome插件，就可讓電腦內的IE瀏覽器規避版本因素，使用Webkit引擎及V8引擎進行排版及運算。當然如果使用者沒裝這個插件，這段程式碼就會讓IE瀏覽器以最高的文件模式展現效果。
4.CSS3 media 媒體查詢的寫法：
@media screen and (max-width: 960px){
body{
background: #000;
}
}這是media的標準寫法，在CSS檔案中，意思是：當頁小於960px時執行下列CSS程式碼，內容暫不用管程式碼，內容暫不用管程式碼。
對於上述程式碼中的screen，意為在告知裝置在列印頁面時使用襯線字體，在螢幕上顯示時用無襯線字體。目前很多網站都會直接省略screen,從而不需要考慮用戶打印網頁的需求，所以又有這種寫法：
@media (max-width: 960px){
body{
background: #000;
}
}本著思維嚴謹的原則，個人不會採用這種寫法。
5.CSS3媒體查詢主體代碼組合：
在響應式網頁佈局中需要持續運用媒體查詢代碼組合，主要作用在於判斷所適配屏幕的寬度，並根據各種寬度條件應用不同的CSS樣式。
如當螢幕寬度等於960px時，將網頁背景色變為紅色：
@media screen and (max-device-width:960px){
body{
background:red;
}
}如當螢幕寬度最大為960px（小於960px）時，將網頁背景色變為黑色：
螢幕寬度最小為960px（大於960px）時，將網頁背景色變為桔色：@media screen and (max-width: 960px){
body{
background: #000;
}
}@media screen and (min-width:960px){
body{
background:orange;
}
}另外談談目前顯示設備中的網頁寬度問題（由於篇幅問題，就不從工業革命開始扯了），目前最為常見的寬度基本上都是：大於或等於960px的PC端（1920px、1600px、1440px 、1280px、1140px、960px）、960px至640px之間的平板端（768px、640px）以及640px以下的手機端（480px、320px），以上寬度存在已久，且顯示設備中的網頁寬度會長期如此如此的狀態下，在響應式網頁寬度設計上，基本上從這幾個尺寸考慮就已經足夠。
8.media媒體查詢所有參數摘要：
orientation
aspect-ratio:检测浏览器可视宽度和高度的比例(例如：aspect-ratio:16/9)，
device-aspect-ratio:检测设备的宽度和高度的比例，
color:检测颜色的位数（例如：min-color:32就会检测设备是否拥有32位颜色），
color-index:检查设备颜色索引表中的颜色（他的值不能是负数），
monochrome:检测单色楨缓冲区域中的每个像素的位数（这个太高级，估计咱很少会用的到），
resolution:检测屏幕或打印机的分辨率(例如：min-resolution:300dpi或min-resolution:118dpcm)，
grid：检测输出的设备是网格的还是位图设备。
9.扩展——在CSS2中同样有媒体查询：
media媒体查询并不是CSS3诞生之后的专用功能，早在CSS2开始就已经支持media，比如：
在HTML文件中的
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
以上是CSS2实现的衬线用法，href属性中写入在某单一显示设备中链接的CSS文件，但仅供入门，
如要判断移动设备是否为纵向放置的显示屏，可以这样写：
<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">
如要让小于960px的页面执行指定的CSS样式文件，可以这样写：
<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">
当然，CSS2中的媒体查询方法放到现在并不推荐使用，最大的弊端在于这样会增加页面http的请求次数，增加页面负担，使用CSS3中的媒体查询才是目前的最佳方法。
更多CSS3中的media媒体查询相关文章请关注PHP中文网！
