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)鍵字一樣。
