本篇文章給介紹媒體查詢是什麼？怎麼使用？讓大家了解媒體查詢的使用方式。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。
媒體查詢是什麼？有什麼用？
媒體查詢限制CSS樣式的範圍，以便僅在滿足某些媒體條件時才適用。
簡單來說：媒體查詢可以讓我們根據裝置顯示器的特性（如視窗寬度、螢幕比例、裝置方向：橫向或縱向）為其設定CSS樣式。
媒體查詢可用於偵測的媒體特性，例如： width 、 height 和 color （等）。使用媒體查詢，可以在不改變頁面內容的情況下，為特定的某些輸出裝置客製化顯示效果。 【相關影片教學推薦：css3教學】
媒體查詢是怎麼使用的？
我們可以將媒體查詢視為瀏覽器的if-else語句來解釋，媒體查詢是評估為真或假的邏輯表達式。媒體查詢包括可選的媒體類型、零個或多個媒體特性以及允許建構更複雜表達式的邏輯關鍵字。
1、基本語法：
@media [not | only] <media-type> [and] (<media-condition>);
說明：
##media-type（媒體類型）
可以設定以列的媒體類型：
all：符合所有裝置。 print：符合印表機和用於重現列印顯示的設備，例如在「預覽」中顯示文件的網頁瀏覽器。 screen：符合所有與列印或語音不符的裝置。 speech：符合螢幕閱讀器和「讀出」頁面的類似裝置。media-condition（媒體功能）
媒體功能比媒體類型更精細，因為它針對相關裝置設定單一特定功能。媒體功能的語法與CSS屬性相同，包括功能名稱，冒號和要測試的值都相同。 媒體功能清單也已從媒體查詢等級3更改為媒體查詢等級4；已棄用的功能已保留在規範中以便向後相容，但強調它們不得用於新樣式表。用戶代理仍將按指定繼續支援它們。可以設定以列的媒體功能：
螢幕/裝置的尺寸：#
width
height
#
aspect-ratio
orientation
顯示品質：
#
resolution
scan
#
grid
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中媒體查詢是什麼？怎麼使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
