css之媒体查询

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

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

- 使用方法

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(min-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .class {
    display: none;
  }
}
</style>

- 多个媒体特性使用

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

-逗号分隔列表

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

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

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

- not关键词

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

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

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

- only关键词

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