设计人员可以调整设计，以满足用户需求。 最明显的例子是用户设备的规格，包括宽度、设备宽高比和其他方面。借助媒体查询，设计人员可以针对这些不同的外形规格做出响应。
媒体查询以 @media 关键字（一种 CSS @ 规则）开头，可用于各种应用场景。
定位不同类型的输出
网站通常显示在屏幕上，但 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 at 规则。
根据视口大小调整样式
对于自适应设计，最实用的媒体功能之一是浏览器视口的尺寸。
如需在浏览器窗口宽度大于特定宽度时应用样式，请使用 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. */
}
此媒体查询也可以使用 width 媒体功能和小于等于运算符来编写。
@media (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. /*
}
也可以使用范围语法来编写。
@media (50em <= 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，高度必须至少为 30em，才能应用列样式。
这些断点是根据内容量选择的。
@media (min-width: 50em) and (min-height: 30em) {
article {
column-count: 2;
}
}
您还可以使用 or 和 not 关键字来表达更复杂的样式应用情况。这些测试在逻辑上可能难以推理，因此请务必测试它们是否按预期运行和互动。
@media not ((width >= 30em) or (orientation: landscape)) {
/* These styles won't be shown if the viewport is wider than 30em, or if the orientation is landscape. */
.navlist {
flex-direction: column;
}
}
这些示例展示了如何使用媒体查询来根据用户设备的规格调整设计，但这些只是冰山一角。媒体查询不仅可以查询宽度和高度，还可以查询用户对无障碍功能和主题颜色的偏好设置。使用媒体查询调整布局是实现自适应设计的良好开端，自适应设计在此基础上还提供了更多功能。
检验您的掌握情况
测试您对自适应媒体查询的了解程度。
媒体查询是否仅适用于屏幕尺寸？
屏幕是使用或显示网络内容的唯一场所？
默认媒体类型是什么？
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 不是有效的媒体查询功能条件。