首頁  >  文章  >  web前端  >  css中媒體查詢是什麼?怎麼使用?

css中媒體查詢是什麼?怎麼使用?

青灯夜游
青灯夜游原創
2018-11-09 10:38:207239瀏覽

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

媒體查詢是什麼?有什麼用?

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

簡單來說:媒體查詢可以讓我們根據裝置顯示器的特性(如視窗寬度、螢幕比例、裝置方向:橫向或縱向)為其設定CSS樣式。

媒體查詢可用於偵測的媒體特性,例如: width 、 height 和 color (等)。使用媒體查詢,可以在不改變頁面內容的情況下,為特定的某些輸出裝置客製化顯示效果。 【相關影片教學推薦:css3教學

媒體查詢是怎麼使用的?

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

1、基本語法:

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

說明:

##media-type(媒體類型)

媒體類型是可以顯示HTML文件的廣泛類別的使用者代理裝置。媒體類型清單已在媒體查詢級別4規範中進行了修訂。已棄用的媒體類型被識別為有效,但不會與任何裝置匹配,即您的媒體查詢仍將適用,但在所有裝置上都應用,就像沒有指定媒體類型一樣。

可以設定以列的媒體類型:

all:符合所有裝置。

print:符合印表機和用於重現列印顯示的設備,例如在「預覽」中顯示文件的網頁瀏覽器。

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;
       }
}
css中媒體查詢是什麼?怎麼使用?

說明:

該段落媒體查詢的意思是:當裝置螢幕寬度在320px~~720px之間時,媒體查詢設定body的背景色(background-color:red;)會重疊之前的body背景色;當裝置螢幕寬度在320px以下時,媒體查詢可以設定body的背景色(background-color:blue;),同樣會重疊之前的body背景色。

#########css @media查詢的瀏覽器支援#############基於媒體資訊應用程式樣式的方法,包括頁面和裝置尺寸等內容。 ######可以支援以下版本:##################總結:###以上就是這篇文章的全部內容,希望能對大家的學習有所幫助。 ###

以上是css中媒體查詢是什麼?怎麼使用?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn