媒体查询通过设备特性应用不同样式，实现响应式设计。使用@media规则定义条件，如(min-width: 768px)设置断点，配合width、height、orientation等特性适配屏幕。移动端优先策略推荐先写小屏样式，再用min-width递增布局。常见断点为768px、1024px、1200px，结合and连接多个条件，确保页面在各类设备良好显示。
媒体查询（Media Query）是CSS中用于实现响应式设计的重要工具，它可以根据设备的特性（如屏幕宽度、高度、方向等）来应用不同的样式规则。通过媒体查询，可以让网页在不同设备上都有良好的显示效果。
基本语法结构
媒体查询使用 @media 规则包裹一组CSS样式，并指定生效条件：
@media 媒体类型 and (媒体特性) {/* 样式规则 */
}
也可以省略媒体类型，默认为 all（所有设备）：
@media (条件) {body { background: lightblue; }
}
常用媒体特性
媒体特性描述了目标设备的状态，常见特性包括：
立即学习“前端免费学习笔记（深入）”；
-
width：视口宽度，如
(min-width: 768px) -
height：视口高度，如
(max-height: 600px) -
orientation：设备方向，可选值为
portrait（竖屏）或landscape（横屏） -
aspect-ratio：宽高比，如
(aspect-ratio: 16/9) -
resolution：分辨率，如
(min-resolution: 2dppx)
注意：媒体特性需用括号包裹，多个条件可用 and 连接。
常见使用场景示例
以下是几个典型的响应式布局写法：
/* 当屏幕宽度大于等于768px时应用以下样式 */ @media (min-width: 768px) { .container { width: 750px; margin: 0 auto; } }/ 当屏幕宽度小于600px时 / @media (max-width: 599px) { nav ul { flex-direction: column; } }
/ 横屏且最小宽度为480px / @media (min-width: 480px) and (orientation: landscape) { body { font-size: 18px; } }
/ 针对打印设备隐藏侧边栏 / @media print { .sidebar { display: none; } }
移动端优先与断点设置
现代响应式设计通常采用“移动端优先”策略，先写小屏幕样式，再通过 min-width 添加更大屏幕的增强样式。
常见断点参考：
合理设置断点能让页面在各种设备上自然适配。
基本上就这些。掌握好媒体查询，就能让网页灵活适应不同设备，提升用户体验。不复杂但容易忽略细节，比如单位别写错，括号别漏掉。
