设计师可以调整其设计以适应用户。 最明显的例子就是用户设备的外形规格；设备的宽度、设备宽高比等。使用媒体查询，设计师可以针对这些不同的外形规格做出响应。
媒体查询是使用 @media 关键字（CSS at-rule）启动的，可用于各种用例。
针对不同类型的输出
网站通常显示在屏幕上，但 CSS 还可用于为其他输出设置网站样式。 您可能希望网页在屏幕上显示的样子与打印后的样子不同。 查询媒体类型可实现这一点。
在此示例中，背景颜色设置为灰色。但如果网页是打印出来的，背景颜色应是透明的。 这样可以节省用户的打印机墨水。
body {
color: black;
background-color: grey;
}
@media print {
body {
background-color: transparent;
}
}
您可以在样式表中像这样使用 @media at-rule，也可以创建单独的样式表，并在 link 元素上使用 media 属性：
<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="print.css" media="print">
如果您未为 CSS 指定任何媒体类型，则其媒体类型值将自动设为 all。这两个 CSS 块是等效的：
body {
color: black;
background-color: white;
}
@media all {
body {
color: black;
background-color: white;
}
}
以下两行 HTML 也是等效的：
<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="global.css" media="all">
查询条件
您可以为媒体类型添加条件。这些查询称为媒体查询。 只有在媒体类型匹配且条件也为 true 时，系统才会应用 CSS。 这些条件称为媒体功能。
以下是媒体查询的语法：
@media type and (feature)
如果您的样式位于单独的样式表中，您可以对 link 元素使用媒体查询：
<link rel="stylesheet" href="specific.css" media="type and (feature)">
假设您希望根据浏览器窗口是处于横屏模式（视口宽度大于高度）还是竖屏模式（视口高度大于宽度）来应用不同的样式。您可以使用名为 orientation 的媒体功能进行测试：
@media all and (orientation: landscape) {
// Styles for landscape mode.
}
@media all and (orientation: portrait) {
// Styles for portrait mode.
}
或者，如果您想使用单独的样式表：
<link rel="stylesheet" href="landscape.css" media="all and (orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="all and (orientation: portrait)">
在本例中，媒体类型为 all。由于这是默认值，因此您可以根据需要省略此值：
@media (orientation: landscape) {
// Styles for landscape mode.
}
@media (orientation: portrait) {
// Styles for portrait mode.
}
或者使用单独的样式表：
<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">
虽然为不同的媒体类型（例如 print）使用单独的样式表可能没问题，但为每个媒体查询使用单独的样式表可能不是一个好主意。请改用 @media 属性规则。
根据视口大小调整样式
对于自适应设计，最实用的媒体功能之一涉及浏览器视口的尺寸。
如需在浏览器窗口宽度超过特定宽度时应用样式，请使用 min-width。
@media (min-width: 400px) {
// Styles for viewports wider than 400 pixels.
}
使用 max-width 媒体功能在宽度低于特定值时应用样式：
@media (max-width: 400px) {
// Styles for viewports narrower than 400 pixels.
}
您可以在媒体查询中使用任何 CSS 长度单位。
如果您的内容主要以图片为主，则像素可能最适合。如果您的内容主要以文本形式呈现，则最好使用基于文本大小的相对单位，例如 em 或 ch：
@media (min-width: 25em) {
// Styles for viewports wider than 25em.
}
您还可以组合媒体查询以应用多个条件。使用 and 字词组合媒体查询：
@media (min-width: 50em) and (max-width: 60em) {
// Styles for viewports wider than 50em and narrower than 60em.
}
根据内容选择断点
媒体功能条件变为 true 的点称为断点。 最好根据内容选择断点，而不是根据常见的设备尺寸选择断点，因为这些尺寸会随着每一次技术发布周期而变化。
在此示例中，50em 是文本行变得过长的点。因此，系统会创建一个断点，以使界面更易于阅读。使用 column-count 属性后，文本会从该点开始分为两列。
@media (min-width: 50em) {
article {
column-count: 2;
}
}
组合
您可以根据视口的高度（而不仅仅是宽度）使用媒体查询。 这对于优化“首屏”界面内容非常有用。在上面的示例中，如果读者使用的是宽度较大但高度较小的浏览器窗口，则必须向下滚动一列，然后再向上滚动到第二列的顶部。建议仅在视口足够宽且足够高时应用列，这样更安全。
您可以组合媒体查询，以便仅在所有条件都为 true 时应用样式。在本例中，视口的宽度必须至少为 50em 且高度至少为 60em，才能应用列样式。
这些断点是根据内容量选择的。
@media (min-width: 50em) and (min-height: 60em) {
article {
column-count: 2;
}
}
这些示例展示了如何使用媒体查询根据用户设备的外形规格调整设计，但这只是可能性的冰山一角。媒体查询可以远不止于宽度和高度，它还可以获取用户对无障碍功能和主题颜色的偏好设置。 使用媒体查询调整布局是自适应设计的良好开端，自适应设计以这些功能为基础，并在此基础上进行扩展。
检查您的理解情况
测试您对自适应媒体查询的知识掌握情况。
媒体查询是否仅适用于屏幕尺寸？
屏幕是访问或显示 Web 内容的唯一位置？
默认的媒体类型是？
screenscreen 不是默认类型。nonenone”不是有效的媒体类型。allsomesome”不是有效的媒体类型。landscapelandscape”不是有效的媒体类型。您会使用什么来阻止浏览器在移动设备上缩放设计？
width: 100%font-size: 200%<meta name="viewport" content="width=device-width, initial-scale=1">当浏览器窗口位于 720px 上方时，系统会应用哪个媒体查询。
@media (width: 720px)720px 的情况。@media (max-width: 720px)720px 的情况。@media (min-width: 720px)720px。@media (clamp-width: 720px)clamp-width 不是有效的媒体查询功能条件。