CSS媒体查询使我们可以根据显示HTML页面的设备在HTML页面中应用不同的CSS样式。更具体地说，媒体查询使我们可以根据浏览器窗口宽度，设备屏幕宽度，设备类型，长宽比和像素比来应用不同的样式。不过，在许多情况下，将媒体查询基于浏览器窗口宽度就足够了。

插入媒体查询

可以通过以下方式将CSS媒体查询插入HTML页面：

• 插入到引用CSS样式表的<link>元素中。
• 插入CSS样式表中的@import CSS指令之前。
• 插入CSS样式表中。

下面是每种方法的示例：

<link rel="stylesheet" href="mycss.css" media="only screen and (max-width: 1200px)">

这个例子展示了如何向" link"元素添加媒体查询。仅当满足媒体查询中的条件时，CSS文件才会应用于HTML文档。

@import url('my-other-css.css') only screen and (max-width: 1200px);

本示例说明如何从另一个CSS样式表中导入CSS样式表。我们可以在" @import"指令后添加媒体查询。仅在满足媒体查询中的条件时，才导入和应用CSS文件。

@media only screen and (max-width: 1200px) {
    /* css rules */
}

本示例说明如何将媒体查询直接插入CSS样式表。仅在满足媒体查询中的条件时，才会应用媒体查询块内的CSS规则。

媒体查询语法

无论我们在" link"元素中，在@import指令之后还是在CSS样式表中使用媒体查询，语法都相同。媒体查询遵循以下语法：

[logic] [media] [and (condition)] [and (condition)] ...

对于[logic]令牌，我们可以使用以下值之一：

我们可以使用[media]令牌使用以下值之一：

媒体类型更多，但在撰写本文时，浏览器并不支持所有媒体类型。我们可以在http://www.w3.org/TR/CSS21/media.html上找到完整列表。

[和(条件)]阻止为屏幕设置条件。例如，我们可以在条件块内使用以下属性：

我们可能已经发现，条件属性分为两组：第一组与浏览器窗口的宽度和高度有关，第二组与物理设备屏幕的宽度和高度有关。在台式计算机上，如果用户调整了浏览器的大小，则浏览器窗口的宽度可能会更改，但是设备的宽度不会更改。那是静态的(除非用户更改图形卡上的屏幕分辨率)。

在移动设备上，浏览器的窗口宽度和设备宽度通常相同，因为浏览器通常占据整个设备屏幕。但是，如果用户更改设备的方向，则设备的宽度将变为设备的高度，反之亦然。

媒体查询示例

以下是一些媒体查询示例：

<style&gt
    @media only screen and (max-width: 600px) {
        /* CSS rules for browser widths equal to or less than 600px */
        body { background-color: #ffffff; }
    }
    @media only screen and (min-width: 601px) and (max-width: 1200px) {
        /* CSS rules for browser widths from 601px to 1200 px */
        body { background-color: #ff0000; }
    }
    @media only screen and (min-width: 1201px) {
        /* CSS rules for browser widths from 1201px and up */
        body { background-color: #0000ff; }
    }
</style&gt

这三个媒体查询匹配不同的浏览器窗口宽度。第一个媒体查询匹配所有小于或者等于600像素的浏览器宽度。这意味着仅当浏览器窗口宽度小于或者等于600px时，才会应用媒体查询主体(在{...}内部)列出的所有CSS规则。

第二个媒体查询匹配从601像素到1200像素的浏览器窗口宽度。仅当浏览器窗口宽度在此间隔内时，才会应用媒体查询主体内的CSS规则。

第三个媒体查询匹配的浏览器窗口宽度为1201像素及以上。仅当浏览器窗口宽度为1201像素或者更大时，才会应用媒体查询主体内的CSS规则。

在示例中，每个媒体查询在主体内部只有一条CSS规则，用于设置背景颜色。在实际的Web应用程序或者网站中，我们可能会有更多的CSS规则。