前言
在本节中，我们会一起探究媒介查询的强大之处：渲染的页面能够自适应于所有的设备和所有的可能场景。好吧，我承认有点夸大其词。但是接下来我们确实会创建一个简单的Web页面，该页面可适用于不同窗口大小的浏览器、不同的设备以及其他可能的呈现方式。
准备工作
仅仅为了学习本节内容，你就得出去购买在此处所列的每一种设备，例如一台高清电视、一部智能手机、一部功能手机，至少还要有一台打印机。什么，没门？好吧，出于为你减少花费的考虑，我还只是让你买一些最有代表性的设备。这说明在每种设备上面都进行测试媒介查询是不太现实的，因为设备的种类太多了。其实在现实生活中，绝大多数的设备都是不会用到的，同时你也不会在意。接下来我们只是关注于那些平时会经常使用到的媒介查询场景。
这里先跳过那些对你来说不必要的设备。如果你发现需要在那些平时不怎么常见的设备中展现页面，也能非常容易地获取到相关的媒介查询信息。你永远不知道什么时候需要用哪些稀奇古怪的设备！如果需要，可访问WC3以获得详尽的信息和描述，网址为www.w3.org/TR/css3-mediaqueries/。在此，就不去关注那些无关问题了，只列举几种具有特定颜色限制的设备：单色显示终端、打印机、电视以及手持设备。此处媒介查询应用得最多的要数screen和print设置。
实现方式
创建一个HTML页面，其中包含一个h1的标题和一个div元素，div元素中包含一个image元素以及一段文本。如果没有合适的文本内容，可以用Ipsum生成一些。页面的源码如下所示：
接下来，就需要创建相关的媒介查询了。在下面所述的列表中，会对每一条设置进行一些简短的说明：
当Web页面处于打印状态时，就会启用该媒介查询。可以通过选择菜单File|Print然后查看打印预览进行验证。该媒介查询对于那些需要打印出来的Web页面是非常有用的。当然也可以修改或删除一些样式，确保打印版本的页面尽可能简洁。
这条配置信息作用于所有的竖屏显示设备。可以使得移动设备在横竖屏切换的时候呈现出不同的显示效果。有一点需要注意，该设置对于桌面设备同样适用，除非你限定该媒介查询只在较小的屏幕或设备上起作用。媒介查询的另一个方向值就是横屏。
基于height及width的媒介查询允许设置针对特定大小屏幕的样式。
上面的媒介查询会给所有页面施加同样的样式，无论浏览器窗口大小是多少，也就是说，以指定的大小在设备上渲染页面。
此处的媒介查询用于对16/9比率的设备窗口（非print类型）进行样式设置。
该设定选项适用于采用电视作为视频输出的设备。
在媒介查询中，min-width和max-width是最为有用的两个。基于该媒介查询能为任何窗口大小的设备设置响应式样式，这其中也包括那些屏幕很小的移动设备。首先设置最小（即移动）设备的相关样式，接下来设置那些最常见大小屏幕的相关样式，最后通过min-width来适配最大尺寸的屏幕。
创建了与项目显示设备相关的媒介查询后，通过给媒介查询设定不同的属性值进行样式的配置：
页面的最终版本呈现在下面的截图中。
工作原理
经过这些不同的设置后，就能够发现在不同的设备中，页面呈现出了不同的样式效果。当然，在你的站点中也可以通过组合不同的配置来实现更加多样化的响应式特效。