但是仅仅有流式布局是不够的。如果浏览器的窗口很小，以至于按照缩放比例得到的布局，创建出来的列太小不能有效的显示内容。具体说，就是当布局太小或是太大，内容可能难以辨认，布局也可能遭到破坏。

在这种情况下，媒体查询就用来辅助建立一个更好的用户体验

css2可以根据媒体的类型来指定显示的样式，例如指定screen在屏幕显示时的样式，print指定在打印时使用的样式。

而在css3中媒体查询增强了。你可以添加表达式和媒体类型来指定不同设备的样式规则。例如，你可以为PC指定一种样式，而对手机指定另一种样式。使用css3的这种特性，您可以对相同的网页在不同的设备上使用不同的css样式。

一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能限制样式表范围的表达式组成, 例如宽度，高度和颜色。在CSS3中添加的媒体查询，允许内容的呈现针对一个特定范围的输出设备而定制，而不必改变内容本身。

有多种使用媒体查询的方式。

link方式引入：(引入的是文件)

 <link rel="stylesheet" type="text/css" href="./css/print.css" media="screen" />

@import方式引入。这种引入既可以在样式文件中使用，也可以在style标签中使用。(引入的都是样式文件)
```
 @import url("./css/print.css") print;
```
@media方式引入。可以在样式文件中使用，也可以在style标签中使用。

@media screen{
  选择器{
    属性：属性值；
  }
}

推荐使用：方式1或者方式3.

使用说明：

媒体查询包含一个可选的媒体类型和零个或多个满足CSS3规范的表达式. 这些表达式描述了媒体特征, 最终会被解析为true或false. 如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型, 并且所有的表达式的值都是true, 那么该媒体查询的结果为true.
当媒体查询为true时, 其对应的样式表或样式规则就会遵循正常的级联规则进行应用. 即使媒体查询返回false, <link> 标签指向的样式表也将会被下载(但是它们不会被应用)
媒体类型是可选的,默认是all。(所有媒体)

到目前css3中，一共支持10多种媒体类型。

但只有前3种常用，其余的不应该使用

大部分属性支持添加max-或min-前缀。

例如：下面媒体特性表示在宽度小于等于600px的时候匹配。
max-width:600px

可以使用not，and和 only 等逻辑操作符构建复杂的媒体查询。

and操作符用来把多个媒体属性组合成一条媒体查询。只有当每个属性都为真时，结果才为真。

not操作符用来对一条媒体查询的结果进行取反。

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

, (逗号分隔符) 等同于 or逻辑操作符。当使用逗号分隔的媒体查询时，如果任何一个媒体查询返回真，样式就是有效的。逗号分隔的列表中每个查询都是独立的，一个查询中的操作符并不影响其它的媒体查询。这意味着逗号媒体查询列表能够作用于不同的媒体属性、类型和状态。

若使用了not或 only 操作符，必须明确指定一个媒体类型。

@media screen and (max-width: 600px) {
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
}

@media screen and (min-width: 600px) {
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
}

@media print , screen and (orientation: portrait){
    div{
        width : 200px;
        height : 200px;
        background-color : pink;
    }
}

3.媒体查询

results matching ""