1术辐,寫在前面的話
前端的生態(tài)很繁榮验毡,技術(shù)更新迭代很快诈乒,很多新的框架和技術(shù)不斷在推陳出新蚊夫,與此同時赡勘,在另一方面呀狼,隨著科技的不斷發(fā)展攒读,用戶獲取信息的方式與媒介也越來越多樣化绸贡,前端產(chǎn)出的內(nèi)容【頁面】就需要去適配多樣化的媒介與終端加袋,給用戶更好的體驗(yàn)猴抹,而在這其中CSS中的媒體查詢模塊就發(fā)揮著重要的作用,讓你的產(chǎn)出“響應(yīng)”用戶的不同場景下的信息獲取锁荔。
2蟀给,規(guī)范定義
我們先來看下規(guī)范的定義
HTML4 [HTML401] and CSS2 [CSS21] currently support media-dependent style sheets tailored for different media types. For example, a document may use different style sheets for screen and print. In HTML4, this can be written as:
HTML4[HTML401] 和CSS2[CSS21] 現(xiàn)在支持針對不同媒體類型定制的設(shè)備獨(dú)立的樣式表。比如阳堕,一個文檔可以為顯示屏幕和打印使用不同的樣式表跋理。在HTML4中,有兩種方式的寫法:
第一種寫法:
<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"> <link rel="stylesheet" type="text/css" media="print" href="serif.css">
直接在樣式表鏈接里指定樣式表應(yīng)用的媒體類型恬总。
第二種寫法:
@media screen { * { font-family: sans-serif } }
在樣式表里通過media規(guī)則指定某種媒體類型下的樣式定義前普。
The ‘print’ and ‘screen’ media types are defined in HTML4. The complete list of media types in HTML4 is: ‘a(chǎn)ural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’. CSS2 defines the same list, deprecates ‘a(chǎn)ural’ and adds ‘embossed’ and ‘speech’. Also, ‘a(chǎn)ll’ is used to indicate that the style sheet applies to all media types.
上面涉及到的兩種媒體類型是在HTML4中定義的,HTML4定義完整的媒體類型有: ‘a(chǎn)ural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’壹堰。CSS2中定義的媒體類型列表和HTML4一樣拭卿,只是廢棄了 ‘a(chǎn)ural’,同時增加了 ‘embossed’ 贱纠、 ‘speech’峻厚。 ‘a(chǎn)ll’也是用來表明樣式定義對所有媒體類型都起作用。
多個用戶代理比如瀏覽器谆焊,都支持"特定于媒體"的樣式表惠桃。 最常媒體類型就是“屏幕”和“打印”。在很多場景下,我們會有更詳細(xì)地描述樣式表應(yīng)用于哪種類型的輸出設(shè)備辜王, 幸運(yùn)的是劈狐,HTML4預(yù)見了這些請求,并為媒體類型定義了向前兼容的語法呐馆,詳細(xì)見HTML4, section 6.13肥缔。
3,應(yīng)用規(guī)則
媒體查詢由媒體類型汹来、零個或多個檢查特定媒體特性應(yīng)用判斷的表達(dá)式組成辫继。除了上訴兩種主要方式去應(yīng)用媒體查詢外,我們核状龋可以在@import規(guī)則里去應(yīng)用媒體查詢
@import url(color.css) screen and (color);
媒體查詢是一個邏輯表達(dá)式,可以為true或false遣耍。 如果媒體查詢的媒體類型與運(yùn)行用戶代理的設(shè)備的媒體類型匹配闺阱,并且媒體查詢中的所有表達(dá)式均為true,則媒體查詢?yōu)閠rue舵变。為適用于所有媒體類型的媒體查詢提供了一種簡寫語法酣溃。 可以省略關(guān)鍵字“all”(后跟“and”)。 即 如果未明確指定媒體類型纪隙,則為“全部”赊豌。例如:
@media all and (min-width:500px) { … }
@media (min-width:500px) { … }
上面這兩種寫法都是可以的,應(yīng)用范圍也是一樣的绵咱。
媒體查詢是可以組合應(yīng)用的碘饼,可以在媒體查詢列表中組合幾個。 媒體查詢列表以逗號進(jìn)行分隔悲伶。 如果以逗號分隔的列表中的一個或多個媒體查詢?yōu)閠rue艾恼,則整個列表為true,否則為false麸锉。 在媒體查詢語法中钠绍,逗號表示邏輯“或”,而關(guān)鍵字“ and”表示邏輯“與”花沉。
@media screen and (color), projection and (color) { … }
如果媒體查詢列表為空(即聲明為空字符串或僅由空格組成)柳爽,則計算結(jié)果為true。等同于如下兩種定義:
@media all { … }
@media { … }
邏輯非可以通過'not'關(guān)鍵字表示碱屁。
<link rel="stylesheet" media="not screen and (color)" href="example.css" />
媒體查詢開頭出現(xiàn)關(guān)鍵字“否”會否定結(jié)果磷脯。 也就是說,如果媒體查詢在沒有'not'關(guān)鍵字的情況下為true娩脾,則它將變?yōu)閒alse争拐,反之亦然。不支持該關(guān)鍵字的用戶代理無法識別“not”關(guān)鍵字,不會應(yīng)用相關(guān)的樣式表架曹。
另一個比較常用的關(guān)鍵字就是“only”隘冲,關(guān)鍵字“only”還可以用于向較舊的用戶代理隱藏樣式表。與關(guān)鍵字“not”不同绑雄,用戶代理必須處理以“only”開頭的媒體查詢展辞,就好像不存在“only”關(guān)鍵字一樣。