什么是媒體查詢
媒體查詢由媒體類型和一個或多個檢測媒體特性的條件表達式組成。媒體查詢中可用於檢測的媒體特性有：width、height和color（等）。使用媒體查詢可以在不改變頁面內容的情況下，為特性的一些輸出設備定制顯示效果。
媒體查詢語法
CSS3中的媒體查詢：根據瀏覽器窗口大小的改變，頁面顏色就會改變。
<!DOCTYPE html> <html\> <head> <title>無標題文檔</title> </head> <style> body{ background-color:#0033FF; } @media screen and (max-width: 960px){ body{ background-color:#FF6699 } } @media screen and (max-width: 768px){ body{ background-color:#00FF66; } } @media screen and (max-width: 550px){ body{ background-color:#6633FF; } } @media screen and (max-width: 320px){ body{ background-color:#FFFF00; } } </style> <body> <p>my first @media</p> </body> </html>
CSS2中media:通過<link>標簽的media屬性為樣式表指定設備類型：
<link rel="stylesheet" media="screen" href="portrait-screen.css"/>
媒體查詢則能使我們根據設備的各種功能特性來設定響應的樣式，而不僅僅只針對設備類型，在媒體查詢的開頭追加not會顛倒該查詢的邏輯：
<link rel+"stylesheet" media="screen and (orientation: portrait)" href="portrait-screen.css"/> //設置了媒體類型和媒體特性（顯示屏， 縱向放置） <link rel="stylesheet" media="not screen and (orientation: portrait)" href="portrait- screen.css" /> //非縱向放置的顯示屏 <link rel="stylesheet" media="screen and (orientation: portrait) and (min-width:800px)" href="800wide-portrait-screen.css" /> //限制只有視口寬度大於800px像素的顯示屏設備才能加載此文件
媒體查詢列表（需要用逗號隔開）：
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width:800px), projection" href="800wide-portrait-screen.css" />
除了以上方法還可以使用CSS中的@import指令在當前樣式表中按條件引入其他樣式表。（使用@import方法會增加HTTP請求影響加載速度）
@import url("phone.css") screen and (max-width:360px);
媒體查詢可以檢測的特性：
一個例子：
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>無標題文檔</title> </head> <style> @media (max-width:5000px) { body{ margin:0 auto; width:1000Px; } .left{ float:left; width:450px; height:1200px; margin-left:25px; margin-right:25px; background-color:#99FFCC; } .right{ float:right; width:450px; height:1200px; margin-left:25px; margin-right:25px; background-color:#FFFF99; } .rtop{ width:450px; height:150px; background-color:#CCFFFF; padding:0; position:absolute; left:auto; top:250px; font-size:14px; line-height:21px; text-align:center; overflow:hidden; } .rcenter{ width:450px; height:150px; background-color:#CCFFFF; position:absolute;ss left:auto; top:650px; text-align:center; overflow:hidden; } .rbottom{ width:450px; height:150px; background-color:#CCFFFF; padding:0; position:absolute; left:auto; top:1050px; font-size:20px; line-height:30px; text-align:center; overflow:hidden; } } @media screen and(min-width:750px) and (max-width:1000px) { body{ margin:0 auto; width:750Px; } .left{ float:left; width:350px; height:900px; margin-right:25px; background-color:#99FFCC; } .right{ float:right; width:350px; height:900px; margin-left:25px; background-color:#FFFF99; } .rtop{ width:350px; height:100px; background-color:#CCFFFF; padding:0; position:absolute; left:auto; top:200px; font-size:14px; line-height:21px; text-align:center; overflow:hidden; } .rcenter{ width:350px; height:100px; background-color:#CCFFFF; position:absolute; left:auto; top:500px; text-align:center; overflow:hidden; } .rbottom{ width:350px; height:100px; background-color:#CCFFFF; position:absolute; left:auto; top:800px; font-size:20px; line-height:30px; text-align:center; overflow:hidden; } } @media screen and (min-width: 320px) and (max-width: 750px) { body{ margin:0 auto; width:320Px; } .left{ margin:0 auto; width:320px; height:300px; background-color:#99FFCC; } .right{ margin:0 auto; width:320px; height:900px; background-color:#FFFF99; } .rtop{ width:320px; height:100px; background-color:#CCFFFF; padding:0; position:absolute; left:auto; top:500px; font-size:14px; line-height:21px; text-align:center; overflow:hidden; } .rcenter{ width:320px; height:100px; background-color:#CCFFFF; position:absolute; left:auto; top:800px; text-align:center; overflow:hidden; } .rbottom{ width:320px; height:100px; background-color:#CCFFFF; position:absolute; left:auto; top:1100px; font-size:20px; line-height:30px; text-align:center; overflow:hidden; } } </style> <body> <div class="left"> </div> <div class="right"> <div class="rtop"> <p>這是第一段文字這是第一段文字這是第一段文字 這是第一段文字這是第一段文字這是第一段文字 這是第一段文字這是第一段文字這是第一段文字 這是第一段文字這是第一段文字這是第一段文字</p> </div> <div class="rcenter"> <p>這是第二段文字這是第二段文字這是第二段文字 這是第二段文字這是第二段文字這是第二段文字 這是第二段文字這是第二段文字這是第二段文字 這是第二段文字這是第二段文字這是第二段文字</p> </div> <div class="rbottom"> <p>這是第三段文字這是第三段文字這是第三段文字 這是第三段文字這是第三段文字這是第三段文字 這是第三段文字這是第三段文字這是第三段文字 這是第三段文字這是第三段文字這是第三段文字</p> </div> </div> </body> </html>