CSS媒体查询

前言

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

媒体查询与弹性盒布局的适用情况：

媒体查询：当页面的结构发生变化的话最好使用媒体查询。 ​
弹性盒：如果只是宽高的变化，尽量使用弹性盒

媒体查询的使用方法

第一种：使用 link 标签引入外部样式表（推荐使用）

<link rel="stylesheet" media="(min-width: 800px)" href="example.css" />

要记得写上：media="(min-width: 800px)

min-width: 800px 表示当屏幕宽度大于等于800px时，该样式生效。

第二种：使用内部样式表，写在 style 标签里面

<style>
@media (max-width: 600px) {
  .class {
    display: none;
  }
}
</style>

max-width: 600px 表示当屏幕宽度小于等于600px时，该样式生效。

媒体查询书写的基本形式：
@media 媒体类型 and （媒体特性）{你的样式}

媒体类型

媒体类型一般都不用写，直接使用默认值all。

媒体特性

媒体属性：属性值
例如：max-width: 600px

媒体属性

最大宽度max-width

“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。

@media screen and (max-width:580px){
 body {
   background-color: red;
  }
}

上面表示的是：当屏幕小于或等于580px时,页面的背景颜色变为红色。

最小宽度min-width

“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。

@media screen and (min-width:900px){
  .wrapper{width: 980px;}
}

上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。

多个媒体特性使用，使用and关键字

​ Media Queries（媒体查询）可以使用关键词"and"将多个媒体特性结合在一起。也就是说，一个Media Query中可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种媒体类型。
​ 当屏幕在600px~900px之间时，body的背景色渲染为“blue”，如下所示。

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:blue;}
}

设备屏幕的输出宽度Device Width

在智能设备上，例如iPhone、iPad等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。同样的，对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

逗号分隔列表

​ 当使用媒体查询的逗号分隔列表时，如果列表中的任何媒体查询为true，样式表都会被运用。在逗号分隔列表中的每个媒体查询都被作为独立查询对待，运用到一个媒体查询上的任何操作符都不影响其它的。

​ 例如，如果你想应用一套样式在宽度大于等于700px的设备上，或者采用横向模式的便捷式设备上，你可以这样：

@media (min-width: 700px),handheld and (orientation: landscape) { ... }

如果我使用的设备的屏幕宽度大于700px，媒体查询将返回true，样式将被运用。如果我使用的是横向的便捷式设备，第一个媒体查询返回false，但第二个媒体查询将返回true，样式仍将被使用。（相当于“或”逻辑运算符）

not关键词

​ 使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。换句话说，not关键词表示对后面的表达式执行取反操作，如：

@media not print and (max-width: 1200px){样式代码}

上面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。

only关键词

​ only操作符表示仅在媒体查询匹配成功时应用指定样式。
​ 可以通过它让选中的样式在老式浏览器中不被应用

media="only screen and (max-width:1000px)"{...}

​ 上面这行代码，在老式浏览器中被解析为media=“only”，因为没有一个叫only的设备，所以实际上老式浏览器不会应用样式

media="screen and (max-width:1000px)"{...}

​ 上面这行代码，在老式浏览器中被解析为media=“screen”，它把后面的逻辑表达式忽略了。所以老式浏览器会应用样式。所以，在使用媒体查询时，only最好不要忽略

在Media Query中如果没有明确指定Media Type，那么其默认为all，如：

<link rel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />

在样式中，还可以使用多条语句来将同一个样式应用于不同的媒体类型和媒体特性中，指定方式如下所示

<link rel="stylesheet" type="text/css" href="style.css" media="print and (max-width:480px), screen and (min-width:960px)" />

​ 上面代码中style.css样式被用在宽度小于或等于480px的打印预览上，或者被用于屏幕宽度大于或等于960px的设备上。