媒體查詢

1. 前言

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

2. 什么是媒體查詢

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

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

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

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

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

3. screen

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

4. print

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

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

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

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

5. speech

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

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

6. 小結(jié)

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

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

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