媒体查询（Media queries）非常实用，尤其是当你想要根据设备的大致类型（如打印设备与带屏幕的设备）或者特定的特征和设备参数（例如屏幕分辨率和浏览器视窗宽度）来修改网站或应用程序时。 媒体类型（Media types）描述设备的一般类别。除非使用 not 或 only 逻辑操作符，媒体类型是可选的，并且会（隐式地）应用 all 类型。
作为 CSS 3 规范的一部分，可以扩展媒体类型函数，并允许在样式表中使用更精确的显示规则。媒体查询 是评估 True 或 False 的一种表达。如果为True，则继续使用样式表。如果为False，则不能使用样式表。这种简单逻辑通过表达式变得更加强大，使您能够更灵活地对特定的设计场景使用自定义的显示规则。
all 适用于所有设备。 print 适用于在打印预览模式下在屏幕上查看的分页材料和文档。 （有关特定于这些格式的格式问题的信息，请参阅分页媒体。） screen 主要用于屏幕。 speech 主要用于语音合成器。 逻辑操作符（logical operators） not, and, 和 only 可用于联合构造复杂的媒体查询，您还可以通过用逗号分隔多个媒体查询，将它们组合为一个规则。
and and 操作符用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真，它还用于将媒体功能与媒体类型结合在一起。
not not运算符用于否定媒体查询，如果不满足这个条件则返回true，否则返回false。 如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询。 如果使用not运算符，则还必须指定媒体类型。 @media用来开启媒体查询 写法 @media only screen and (max-width: 1112px) { .fact-wrapper { width: 80%; box-sizing: content-box; margin: 0 auto; border-bottom: 1px solid #d6d6d6; } .footer-list { font-size: 0; max-width: 980px; width: 80%; margin: 0 auto; padding-top: 20px; border-top: 1px solid #d6d6d6; } }
首先写上媒体查询的定义尺寸，这里max-width的值与平常所知的不同 为小于多少尺寸的时候，max-width为小于1112px的时候做出的样式改变
媒体查询要有括号，内容写在媒体查询里，使用媒体布局可以达到响应式布局 大屏幕到移动端的转变，可以适应大部分的客户需求，如苹果官网
大多数现代浏览器（包括智能手机上的浏览器）都支持 CSS 媒体查询。
