媒体查询

1. 前言

其实响应式并不仅仅是屏幕窄了就换行，屏幕宽了就填充这么简单。
有很多时候是需要根据设备的不同来显示不同的布局结构，比如在手机屏幕上用单列布局刚刚好，但是这个网址被台式机访问的话单列就会显得过于宽，这时就要根据不同的设备来运行不同的代码，那么怎么才能知道当前的设备呢？这就是本节我们要讲到的媒体查询。

2. 什么是媒体查询

媒体： 就是当前使用的各种设备(移动设备、固定设备等)
查询： 通过查询当前属于何种设备以运行不同的代码

如果问大家媒体一般都指的哪些设备，大多数人都会回答：手机、平板、笔记本和台式机这四种。
但其实这四种在媒体查询的眼里只算一种设备，是不是觉得有些不可思议，那还能有什么别的设备呢？
那咱们就来罗列一下媒体查询的所有设备给大家看一眼：

媒体类型	含义
all	所有设备
aural	(废弃) 用于语音和声音合成器
braille	(废弃) 应用于盲文触摸式反馈设备
embossed	(废弃) 用于打印的盲人印刷设备
handheld	(废弃) 用于掌上设备或更小的装置，如PDA和小型电话
print	用于打印机和打印预览
projection	(废弃) 用于投影设备
screen	用于电脑屏幕、平板电脑、智能手机等
speech	应用于屏幕阅读器等发声设备
tty	(废弃) 用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备
tv	(废弃) 用于电视和网络电视

乍一看是不是有点晕？这么多属性……不过，咱们要好好感谢一下科技的进步，随着科技的飞速发展，许多设备现在都淘汰了：像以前的BB机、传呼机、掌上电脑之类的……（知道这些设备的都暴露年龄了）
所以，咱们再来看一眼现在还没废弃的设备表：

设备	中文含义
all	所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕、平板电脑、智能手机等
speech	应用于屏幕阅读器等发声设备

这次看起来是不是清爽了许多？除了那个all代表所有设备，其他的就只剩仨了：

screen： 这是我们最常用的那些带屏幕的设备
print： 网页其实也是可以通过打印机来打印出来的
speech： 这个不是很常用，除非是那种专门做屏幕自动阅读网站的公司

3. screen

我们日常所见到的那些网页，都是通过屏幕来显示出来的，在媒体查询这里并没有什么手机、平板、笔记本之分，它会把它们通通归类为屏幕设备。
那么怎么才能区分屏幕设备到底是手机、平板、笔记本还是台式机呢？这就是下一小节要说到的媒体功能啦。
利用媒体功能来判断宽度，就能猜出来用户用的大概是个什么设备，然后根据设备的不同来显示不同的样式。

4. print

但是有时候我想打印一个网页，比如你觉得这节教程写的非常棒，但是内容太多了一下子记不住，打算把它打印在纸上没事的时候就看看，打印出来以后你就会发现有这几个问题：

样式有可能会乱
打印出来很多没用的内容
打印用了很多张纸

因为纸张的大小一般就是A4，和电脑屏幕的比例可不一样，在电脑上看着正常的样式，换个比例可能就会乱。
在电脑上有意义的东西可能在纸上就没意义了，比如那些按钮，点击返回上一页什么的，在电脑上可以点，在纸上就变成了一个占地儿的摆设。

用户真正在意的，也就是那些想打印在纸上的这些文字内容，所以需要用 print 来检测是否为打印设备，是的话就不显示那些按钮啊、广告啊、视频啊等等那类的样式了，重点突出的是想打印在纸上的内容。

5. speech

有时候想听个小说，当然现在专门有那种听小说的网站，像什么喜马拉雅之类的，可以直接听真人读出来的录音，所以这个不常用。
但假如用朗读软件读取屏幕上内容的时候，你应该不想听到：首页、登陆、注册、返回等这些没必要读出来的字眼…

用这个可以屏蔽掉那些没有必要读出来的内容。

6. 小结

本节我们主要介绍了：

什么是媒体查询
媒体查询都有哪些种类
screen 的含义
print 的含义
speech 的含义

那么下一小节我们就来讲一下媒体功能。