什么是媒体查询？

媒体查询即media queries，它可以针对不同的媒体类型定义不同的样式，从而实现响应式布局 ，也可以针对不同的分辨率设置不同的样式。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
例如：
1024分辨率以上：PC端
1024 ~ 768 : pad pro
768 ~ 450 : pad mini , mobile 横屏
450分辨率以下： mobile 竖屏

常见的媒体类型：
    all 用于所有设备   
    print 用于打印机和打印预览。
    screen 用于电脑屏幕，平板电脑，智能手机等。
    speech 应用于屏幕阅读器等发声设备。

在media queries中，使用max / min来表示大于等于小于以此作为逻辑判断。
最小宽度：min-width，当媒体类型大于或是等于指定的宽度时，大括号内的样式生效；
最大宽度：max-width，当媒体类型小于或是等于指定的宽度时，大括号内的样式生效。

逻辑运算符：

not：用来排除某种设备。比如，排除打印设备 @media not print；
only：用以指定某特定媒体设备。对于支持 Media Queries 的移动设备来说，如果存在 only 关键字，移动设备的 Web 浏览器会忽略 only关键字并直接根据后面的表达式应用样式文件。对于不支持 Media Queries 的设备但能够读取 Media Type 类型的 Web浏览器，遇到 only 关键字时会忽略这个样式文件。
all：适用于所有的设备类型；
and：媒体查询中使用来连接多种媒体特性,一个媒体查询中可以包含0或多个表达式，表达式可以是0或多个关键字，以及一种媒体类型。

直接写在css样式中：
@media all and (min-width:500px){ }
@media all and (min-width:500px) and (max-width:800px){ }

link的使用：
    <link rel="stylesheet" href="./xxx.css" media="all and (min-width:600px)">