1. 什麼是媒體查詢 媒體查詢可以根據當前顯示設備的特性(如： 視口寬度, 屏幕比例，設備顯示方向)為其添加css樣式， 使用媒體查詢可以在不改變頁面內容的情況下為特定的設備顯示特定的樣式。如果沒有媒體查詢就不能。媒體查詢能夠幫助我們更方便的判斷當前設備特性（視口寬度等），更方便的針對視口設置合適的 ...
1. 什麼是媒體查詢
媒體查詢可以根據當前顯示設備的特性(如： 視口寬度, 屏幕比例，設備顯示方向)為其添加css樣式， 使用媒體查詢可以在不改變頁面內容的情況下為特定的設備顯示特定的樣式。如果沒有媒體查詢就不能。媒體查詢能夠幫助我們更方便的判斷當前設備特性（視口寬度等），更方便的針對視口設置合適的樣式。總之：媒體查詢可以讓網頁適應多個終端。
2. 使用方式
2.1.@media方法(寫在css里).
3.媒體類型
將不同的終端設備劃分為不同的類型, 稱為媒體類型
4. 媒體特性
每個媒體類型都具有各自的媒體特性, 根據不同的媒體類型的媒體特性設置不同的展示風格
常用特性
width / height：完全等於layout viewport (佈局視口)
max-width / max-height：大於layout viewport
min-width / min-height：小於layout viewport
device-width / device-height：完全等於 ideal viewport (理想視口)
5. 關鍵字
關鍵字將媒體類型或多個媒體特性連接到一起作為媒體查詢的條件
1. and 可以將多個媒體特性連接到一起, 相當於"且"的意思.
2. not 排除某個媒體特性, 相對於"非"的意思, 可以省略
3. only 指定某個特定的媒體類型, 可以省略.
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { /* 粉色 */ background: pink; }
/* screen: 查詢類型為電腦或者手機 */ @media screen and (min-width: 480px) { body { /* 天藍色 */ background: skyblue; } } @media screen and (min-width: 768px) { body { /* 黃色 */ background: #FBE251; } } @media screen and (min-width: 992px) { body { /* 紅色 */ background: #E83015; } } @media screen and (min-width: 1200px) { body { /* 綠色 */ background: #1B813E; } } </style> </head> <body> </body> </html>
以上的媒體查詢意思是：
當屏幕視口大於1200px的時候顯示綠色，在1200px與992px之間的時候顯示紅色，在992px與768px之間的時候顯示黃色，在768px與480px之間的時候顯示天然色，當所有條件都不滿足的時候顯示粉色。
細節：
寫媒體查詢的時候要註意書寫順序（判斷最小值要從小到大，判斷最大值就要從大到小)，一般使用了min-width就全部時候min-width，使用了max-width就全部時候max-width。
向上相容：在窄屏設置的樣式，預設在寬屏也會存在。
向下覆蓋：寬屏設置的樣式，會覆蓋窄屏設置的樣式。
