媒體查詢

1. 前言

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

2. 什么是媒體查詢

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

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

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

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

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

3. screen

我們日常所見到的那些網頁，都是通過屏幕來顯示出來的，在媒體查詢這里并沒有什么手機、平板、筆記本之分，它會把它們通通歸類為屏幕設備。
那么怎么才能區分屏幕設備到底是手機、平板、筆記本還是臺式機呢？這就是下一小節要說到的媒體功能啦。
利用媒體功能來判斷寬度，就能猜出來用戶用的大概是個什么設備，然后根據設備的不同來顯示不同的樣式。

4. print

但是有時候我想打印一個網頁，比如你覺得這節教程寫的非常棒，但是內容太多了一下子記不住，打算把它打印在紙上沒事的時候就看看，打印出來以后你就會發現有這幾個問題：

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

因為紙張的大小一般就是A4，和電腦屏幕的比例可不一樣，在電腦上看著正常的樣式，換個比例可能就會亂。
在電腦上有意義的東西可能在紙上就沒意義了，比如那些按鈕，點擊返回上一頁什么的，在電腦上可以點，在紙上就變成了一個占地兒的擺設。

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

5. speech

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

用這個可以屏蔽掉那些沒有必要讀出來的內容。

6. 小結

本節我們主要介紹了：

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

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