一、什么是媒體查詢

媒體查詢可以讓我們根據設備顯示器的特性（如視口寬度、屏幕比例、設備方向：橫向或縱向）為其設定CSS樣式，媒體查詢由媒體類型和一個或多個檢測媒體特性的條件表達式組成。媒體查詢中可用于檢測的媒體特性有 width 、 height 和 color （等）。使用媒體查詢，可以在不改變頁面內容的情況下，為特定的一些輸出設備定制顯示效果。

使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。@media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。

二、@media 媒體查詢的使用

a.要在html文檔中添加以下代碼，用來兼容移動設備的顯示效果

<meta name="viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>

width=device-width:寬度等于當前設備的寬度
initial-scale=1：初始的縮放比例（默認為1）
maximum-scale=1：允許用戶縮放到得最大比例（默認為1）
user-scalable=no：用戶不能手動縮放

b.在CSS文件中寫響應式媒體查詢

基本語法：@media 媒體類型 and （媒體特征）{樣式}

舉例1：

@media screen and (max-width:480px){
body {
background:red
  }
}

表示：當屏幕小于或等于480px時,頁面中的背景顏色變成紅色。

舉例2：

@media screen and (min-width:900px){
body{
font-size：20px
    }
}

表示：當屏幕大于或等于900px時,頁面中的字體大小變成20px。

舉例3：

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

表示：當屏幕在600px~900px之間時，body的背景色為“#f5f5f5”。

總結：以上介紹了什么是媒體查詢@media，并舉例介紹媒體查詢的使用方法。

以上就是CSS用@media媒體查詢進行響應式設計，什么是媒體查詢的詳細內容，更多請關注php中文網其它相關文章！