媒体查询

1. 前言

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

2. 什么是媒体查询

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

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

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

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

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

3. screen

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

4. print

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

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

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

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

5. speech

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

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

6. 小结

本节我们主要介绍了：

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

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