媒體查詢

1. 前言

其實(shí)響應(yīng)式并不僅僅是屏幕窄了就換行，屏幕寬了就填充這么簡(jiǎn)單。
有很多時(shí)候是需要根據(jù)設(shè)備的不同來(lái)顯示不同的布局結(jié)構(gòu)，比如在手機(jī)屏幕上用單列布局剛剛好，但是這個(gè)網(wǎng)址被臺(tái)式機(jī)訪問(wèn)的話單列就會(huì)顯得過(guò)于寬，這時(shí)就要根據(jù)不同的設(shè)備來(lái)運(yùn)行不同的代碼，那么怎么才能知道當(dāng)前的設(shè)備呢？這就是本節(jié)我們要講到的媒體查詢。

2. 什么是媒體查詢

• 媒體： 就是當(dāng)前使用的各種設(shè)備(移動(dòng)設(shè)備、固定設(shè)備等)
• 查詢： 通過(guò)查詢當(dāng)前屬于何種設(shè)備以運(yùn)行不同的代碼

如果問(wèn)大家媒體一般都指的哪些設(shè)備，大多數(shù)人都會(huì)回答：手機(jī)、平板、筆記本和臺(tái)式機(jī)這四種。
但其實(shí)這四種在媒體查詢的眼里只算一種設(shè)備，是不是覺(jué)得有些不可思議，那還能有什么別的設(shè)備呢？
那咱們就來(lái)羅列一下媒體查詢的所有設(shè)備給大家看一眼：

乍一看是不是有點(diǎn)暈？這么多屬性……不過(guò)，咱們要好好感謝一下科技的進(jìn)步，隨著科技的飛速發(fā)展，許多設(shè)備現(xiàn)在都淘汰了：像以前的BB機(jī)、傳呼機(jī)、掌上電腦之類的……（知道這些設(shè)備的都暴露年齡了）
所以，咱們?cè)賮?lái)看一眼現(xiàn)在還沒(méi)廢棄的設(shè)備表：

這次看起來(lái)是不是清爽了許多？除了那個(gè)all代表所有設(shè)備，其他的就只剩仨了：

• screen： 這是我們最常用的那些帶屏幕的設(shè)備
• print： 網(wǎng)頁(yè)其實(shí)也是可以通過(guò)打印機(jī)來(lái)打印出來(lái)的
• speech： 這個(gè)不是很常用，除非是那種專門做屏幕自動(dòng)閱讀網(wǎng)站的公司

3. screen

我們?nèi)粘Ｋ?jiàn)到的那些網(wǎng)頁(yè)，都是通過(guò)屏幕來(lái)顯示出來(lái)的，在媒體查詢這里并沒(méi)有什么手機(jī)、平板、筆記本之分，它會(huì)把它們通通歸類為屏幕設(shè)備。
那么怎么才能區(qū)分屏幕設(shè)備到底是手機(jī)、平板、筆記本還是臺(tái)式機(jī)呢？這就是下一小節(jié)要說(shuō)到的媒體功能啦。
利用媒體功能來(lái)判斷寬度，就能猜出來(lái)用戶用的大概是個(gè)什么設(shè)備，然后根據(jù)設(shè)備的不同來(lái)顯示不同的樣式。

4. print

但是有時(shí)候我想打印一個(gè)網(wǎng)頁(yè)，比如你覺(jué)得這節(jié)教程寫的非常棒，但是內(nèi)容太多了一下子記不住，打算把它打印在紙上沒(méi)事的時(shí)候就看看，打印出來(lái)以后你就會(huì)發(fā)現(xiàn)有這幾個(gè)問(wèn)題：

1. 樣式有可能會(huì)亂
2. 打印出來(lái)很多沒(méi)用的內(nèi)容
3. 打印用了很多張紙

因?yàn)榧垙埖拇笮∫话憔褪茿4，和電腦屏幕的比例可不一樣，在電腦上看著正常的樣式，換個(gè)比例可能就會(huì)亂。
在電腦上有意義的東西可能在紙上就沒(méi)意義了，比如那些按鈕，點(diǎn)擊返回上一頁(yè)什么的，在電腦上可以點(diǎn)，在紙上就變成了一個(gè)占地兒的擺設(shè)。

用戶真正在意的，也就是那些想打印在紙上的這些文字內(nèi)容，所以需要用 print 來(lái)檢測(cè)是否為打印設(shè)備，是的話就不顯示那些按鈕啊、廣告啊、視頻啊等等那類的樣式了，重點(diǎn)突出的是想打印在紙上的內(nèi)容。

5. speech

有時(shí)候想聽(tīng)個(gè)小說(shuō)，當(dāng)然現(xiàn)在專門有那種聽(tīng)小說(shuō)的網(wǎng)站，像什么喜馬拉雅之類的，可以直接聽(tīng)真人讀出來(lái)的錄音，所以這個(gè)不常用。
但假如用朗讀軟件讀取屏幕上內(nèi)容的時(shí)候，你應(yīng)該不想聽(tīng)到：首頁(yè)、登陸、注冊(cè)、返回等這些沒(méi)必要讀出來(lái)的字眼…

用這個(gè)可以屏蔽掉那些沒(méi)有必要讀出來(lái)的內(nèi)容。

6. 小結(jié)

本節(jié)我們主要介紹了：

• 什么是媒體查詢
• 媒體查詢都有哪些種類
• screen 的含義
• print 的含義
• speech 的含義

那么下一小節(jié)我們就來(lái)講一下媒體功能。