css中媒體查詢指的是什么

這篇文章主要介紹css中媒體查詢指的是什么，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

                                                           本篇文章給介紹媒體查詢是什么？怎么使用？讓大家了解媒體查詢的使用方法。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所幫助。

媒體查詢是什么？有什么用？

媒體查詢限制CSS樣式的范圍，以便僅在滿足某些媒體條件時才適用。

簡單來說：媒體查詢可以讓我們根據設備顯示器的特性（如視口寬度、屏幕比例、設備方向：橫向或縱向）為其設定CSS樣式。

媒體查詢可用于檢測的媒體特性，比如： width 、 height 和 color （等）。使用媒體查詢，可以在不改變頁面內容的情況下，為特定的一些輸出設備定制顯示效果。【相關視頻教程推薦：css3教程】

媒體查詢是怎么使用的？

我們可以將媒體查詢視為瀏覽器的if-else語句來解釋，媒體查詢是評估為真或假的邏輯表達式。媒體查詢包括可選的媒體類型、零個或多個媒體特性以及允許構造更復雜表達式的邏輯關鍵字。

1、基本語法：

@media [not | only] <media-type> [and] (<media-condition>);

說明：

media-type（媒體類型）

媒體類型是可以顯示HTML文檔的廣泛類別的用戶代理設備。媒體類型列表已在媒體查詢級別4規范中進行了修訂。已棄用的媒體類型被識別為有效，但不會與任何設備匹配，即您的媒體查詢仍將適用，但在所有設備上都應用，就像沒有指定媒體類型一樣。

可以設置以列的媒體類型：

all：匹配所有設備。

print：匹配打印機和用于再現打印顯示的設備，例如在“預覽”中顯示文檔的Web瀏覽器。

screen：匹配所有與打印或語音不匹配的設備。

speech：匹配屏幕閱讀器和“讀出”頁面的類似設備。

media-condition（媒體功能）

媒體功能比媒體類型更精細，因為它針對相關設備設置單個特定功能。媒體功能的語法與CSS屬性相同，包括功能名稱，冒號和要測試的值都相同。

媒體功能列表也已從介質查詢級別3更改為介質查詢級別4；已棄用的功能已保留在規范中以便向后兼容，但強調它們不得用于新樣式表。用戶代理仍將按指定繼續支持它們。

可以設置以列的媒體功能：

屏幕/設備的尺寸：
      width
      height
      aspect-ratio
      orientation

顯示質量：
      resolution
      scan
      grid
      update
      overflow-block
      overflow-inline

顏色：
      color
      color-index
      monochrome
      color-gamut

相互作用：
      pointer
      hover
      any-pointer 和 any-hover

腳本：
      scripting：

2、媒體查詢的使用示例：

實現CSS響應式媒體查詢

例:

@media screen and (max-width:720px) and (min-width:320px){
      body{
       background-color:red;
       }
@media screen and (max-width:320px){
      body{
         background-color:blue;
       }
}

說明：

該段媒體查詢的意思是：當設備屏幕寬度在320px~~720px之間時，媒體查詢設置body的背景色（background-color:red;）會重疊之前的body背景色；當設備屏幕寬度在320px以下時，媒體查詢可以設置body的背景色（background-color:blue;），同樣會重疊之前的body背景色。

css @media查詢的瀏覽器支持

基于媒體信息應用樣式的方法，包括頁面和設備尺寸等內容。

可以支持以下版本：

以上是css中媒體查詢指的是什么的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！