您好,登錄后才能下訂單哦!
這篇文章主要介紹css中媒體查詢指的是什么,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
本篇文章給介紹媒體查詢是什么?怎么使用?讓大家了解媒體查詢的使用方法。有一定的參考價(jià)值,有需要的朋友可以參考一下,希望對(duì)你們有所幫助。
媒體查詢是什么?有什么用?
媒體查詢限制CSS樣式的范圍,以便僅在滿足某些媒體條件時(shí)才適用。
簡單來說:媒體查詢可以讓我們根據(jù)設(shè)備顯示器的特性(如視口寬度、屏幕比例、設(shè)備方向:橫向或縱向)為其設(shè)定CSS樣式。
媒體查詢可用于檢測的媒體特性,比如: width 、 height 和 color (等)。使用媒體查詢,可以在不改變頁面內(nèi)容的情況下,為特定的一些輸出設(shè)備定制顯示效果?!鞠嚓P(guān)視頻教程推薦:css3教程】
媒體查詢是怎么使用的?
我們可以將媒體查詢視為瀏覽器的if-else語句來解釋,媒體查詢是評(píng)估為真或假的邏輯表達(dá)式。媒體查詢包括可選的媒體類型、零個(gè)或多個(gè)媒體特性以及允許構(gòu)造更復(fù)雜表達(dá)式的邏輯關(guān)鍵字。
1、基本語法:
@media [not | only] <media-type> [and] (<media-condition>);
說明:
media-type(媒體類型)
媒體類型是可以顯示HTML文檔的廣泛類別的用戶代理設(shè)備。媒體類型列表已在媒體查詢級(jí)別4規(guī)范中進(jìn)行了修訂。已棄用的媒體類型被識(shí)別為有效,但不會(huì)與任何設(shè)備匹配,即您的媒體查詢?nèi)詫⑦m用,但在所有設(shè)備上都應(yīng)用,就像沒有指定媒體類型一樣。
可以設(shè)置以列的媒體類型:
all:匹配所有設(shè)備。
print:匹配打印機(jī)和用于再現(xiàn)打印顯示的設(shè)備,例如在“預(yù)覽”中顯示文檔的Web瀏覽器。
screen:匹配所有與打印或語音不匹配的設(shè)備。
speech:匹配屏幕閱讀器和“讀出”頁面的類似設(shè)備。
media-condition(媒體功能)
媒體功能比媒體類型更精細(xì),因?yàn)樗槍?duì)相關(guān)設(shè)備設(shè)置單個(gè)特定功能。媒體功能的語法與CSS屬性相同,包括功能名稱,冒號(hào)和要測試的值都相同。
媒體功能列表也已從介質(zhì)查詢級(jí)別3更改為介質(zhì)查詢級(jí)別4;已棄用的功能已保留在規(guī)范中以便向后兼容,但強(qiáng)調(diào)它們不得用于新樣式表。用戶代理仍將按指定繼續(xù)支持它們。
可以設(shè)置以列的媒體功能:
屏幕/設(shè)備的尺寸:
width
height
aspect-ratio
orientation
顯示質(zhì)量:
resolution
scan
grid
update
overflow-block
overflow-inline
顏色:
color
color-index
monochrome
color-gamut
相互作用:
pointer
hover
any-pointer 和 any-hover
腳本:
scripting:
2、媒體查詢的使用示例:
實(shí)現(xiàn)CSS響應(yīng)式媒體查詢
例:
@media screen and (max-width:720px) and (min-width:320px){ body{ background-color:red; } @media screen and (max-width:320px){ body{ background-color:blue; } }
說明:
該段媒體查詢的意思是:當(dāng)設(shè)備屏幕寬度在320px~~720px之間時(shí),媒體查詢設(shè)置body的背景色(background-color:red;)會(huì)重疊之前的body背景色;當(dāng)設(shè)備屏幕寬度在320px以下時(shí),媒體查詢可以設(shè)置body的背景色(background-color:blue;),同樣會(huì)重疊之前的body背景色。
css @media查詢的瀏覽器支持
基于媒體信息應(yīng)用樣式的方法,包括頁面和設(shè)備尺寸等內(nèi)容。
可以支持以下版本:
以上是css中媒體查詢指的是什么的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。