理解 CSS 媒体查询的基本概念及其在响应式设计中的核心作用。
掌握媒体查询的标准语法结构及常用媒体类型（Media Types）。
学会针对不同屏幕尺寸（手机、平板、桌面）编写自适应样式规则。
熟悉常见的媒体特性（Features），如宽度、高度、分辨率及方向等。
能够独立编写包含视口设置的多断点响应式代码示例。
CSS 媒体查询是 CSS3 模块引入的一项强大功能，它允许网页根据设备的特定特征（如屏幕宽度、高度、方向、分辨率或设备类型）有条件地应用样式规则。它是构建响应式网页设计（Responsive Web Design）的基石，确保网站在手机、平板电脑和桌面显示器等各种设备上都能提供最佳的用户体验。
媒体查询的主要优势包括：
条件化样式应用：根据屏幕宽度或高度动态调整 CSS 规则。
多设备适配：轻松为移动端、平板端和桌面端创建独立的布局方案。
多维度的支持：不仅支持尺寸，还支持方向（横屏 / 竖屏）、分辨率及设备类型等条件。
体验优化：显著提升用户在不同终端设备上的浏览体验。
媒体查询的核心逻辑是：当且仅当指定的条件为真时，包裹在其中的 CSS 样式才会生效。
@media 媒体类型 and (条件表达式) {
/* 此处定义符合条件的 CSS 样式 */
}媒体类型（Media Type）：指定样式适用的设备类别（如 screen 代表屏幕设备，print 代表打印机）。
条件表达式（Condition）：通常包含一个媒体特性（如 max-width）及其值。
逻辑运算符：常用 and 连接媒体类型与条件，也可以使用 not 或 only 进行更复杂的逻辑判断。
为了让媒体查询在移动设备上正常工作，必须在 HTML 文档的 <head> 部分添加视口（viewport）元标签。如果不设置，移动浏览器通常会以桌面宽度渲染页面并缩放，导致媒体查询失效。
<meta name="viewport" content="width=device-width, initial-scale=1.0">以下示例展示了如何根据屏幕宽度改变文本颜色。当屏幕宽度小于或等于 500 像素时，文本将变为绿色；否则保持黑色。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.content-box {
color: black;
font-family: Arial, sans-serif;
}
/* 当屏幕宽度 <= 500px 时应用此样式 */
@media screen and (max-width: 500px) {
.content-box {
color: green;
}
}
</style>
</head>
<body>
<div class="content-box">媒体查询基础示例：调整屏幕宽度观察颜色变化</div>
</body>
</html>媒体类型用于指定样式表适用的设备类别。虽然现代开发中主要关注 screen，但了解其他类型有助于处理特殊场景（如打印样式）。
在实际项目中，我们通常需要为多种屏幕尺寸定义不同的样式，这被称为“断点”（Breakpoints）。
通过堆叠多个媒体查询，可以实现阶梯式的样式变化。注意代码的执行顺序：CSS 遵循层叠原则，后定义的规则若优先级相同则会覆盖前面的规则。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.content-box {
color: black;
font-family: Arial, sans-serif;
}
/* 中等屏幕：宽度 <= 800px，文字变蓝 */
@media screen and (max-width: 800px) {
.content-box {
color: blue;
}
}
/* 小屏幕：宽度 <= 500px，文字变绿 */
@media screen and (max-width: 500px) {
.content-box {
color: green;
}
}
</style>
</head>
<body>
<div class="content-box">多断点示例：宽屏黑字 -> 平板蓝字 -> 手机绿字</div>
</body>
</html>逻辑解析：
大于 800px：应用默认黑色样式。
501px 至 800px：满足第一个查询，应用蓝色样式。
500px 及以下：同时满足两个查询，但由于第二个查询在后，应用绿色样式。
媒体查询不仅可以改变颜色，还可以调整字体大小、内边距、对齐方式等，以实现真正的布局重构。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.content-box {
color: black;
font-size: 20px;
padding: 10px;
font-family: Arial, sans-serif;
border: 1px solid #ccc;
}
/* 平板设备适配 */
@media screen and (max-width: 800px) {
.content-box {
color: blue;
font-size: 18px; /* 字体稍微缩小 */
}
}
/* 手机设备适配 */
@media screen and (max-width: 500px) {
.content-box {
color: green;
font-size: 16px; /* 字体进一步缩小以适应窄屏 */
text-align: center; /* 文字居中对齐 */
padding: 5px; /* 减少内边距以节省空间 */
}
}
</style>
</head>
<body>
<div class="content-box">综合样式适配：随屏幕缩小，字体变小且手机端居中</div>
</body>
</html>除了常用的 width，CSS 媒体查询还支持检测设备的多种硬件特性。以下是开发人员常用的特性列表：
核心机制：媒体查询通过 @media 规则，允许 CSS 根据设备特征（主要是屏幕宽度）有条件地应用样式，是实现响应式设计的关键。
必要配置：在移动端开发中，必须添加 <meta name="viewport" ...> 标签，否则媒体查询无法正确获取设备宽度。
语法结构：标准格式为 @media 媒体类型 and (特性: 值) { 样式 }，其中 screen 是最常用的媒体类型。
层叠原则：当多个媒体查询条件同时满足时，后定义的样式会覆盖先定义的样式（假设优先级相同），因此断点的书写顺序至关重要。
丰富特性：除了宽度，开发者还可以利用方向、分辨率、颜色深度等特性来精细化控制不同设备的展示效果。
如果在 HTML 头部忘记添加 viewport 元标签，在 iPhone 上访问一个使用了 max-width: 600px 媒体查询的网站，会发生什么现象？为什么？
请解释 min-width 和 max-width 在构建响应式布局时的区别，并说明在“移动优先（Mobile First）”的设计策略中，应该优先使用哪一个？
假设我们需要为高分辨率打印设备（如 600dpi 以上的激光打印机）专门优化图片清晰度，应该如何编写对应的媒体查询语句？