答案：媒体查询通过@media语法根据设备特性应用不同样式，常用max-width和min-width设置断点，推荐移动优先策略，结合screen、orientation等特征实现响应式布局。
媒体查询（@media）是CSS中用于实现响应式设计的重要工具，它允许根据设备的特性（如屏幕宽度、高度、方向等）应用不同的样式规则。掌握其语法和断点设置方法，能有效提升网页在不同设备上的显示效果。
基本语法格式
@media 查询条件 { 样式规则 }
媒体查询以 @media 开始，后接一个或多个媒体条件，条件成立时，花括号内的CSS规则才会生效。
常见写法如下：
@media screen and (max-width: 768px) {body { background-color: lightblue; }
}
说明：
立即学习“前端免费学习笔记（深入）”；
- screen：指定目标设备类型，常用值有 screen（屏幕）、print（打印）、all（所有设备）
- and：逻辑操作符，连接多个条件
- (max-width: 768px)：媒体特征，表示最大视口宽度为768像素
也可使用 not 或 only 来修饰：
- not：否定整个查询（常用于排除某些情况）
- only：仅当条件匹配时应用，主要用于兼容旧浏览器
常用媒体特征（Media Features）
决定何时应用样式的判断依据，常见的包括：
- width / min-width / max-width：视口宽度
- height / min-height / max-height：视口高度
- orientation：设备方向（portrait 竖屏、landscape 横屏）
- aspect-ratio：宽高比，如 (aspect-ratio: 16/9)
- resolution：分辨率，如 (min-resolution: 2dppx)
断点设置方法与常见取值
断点（Breakpoint）是指页面布局发生改变的临界值，通常基于主流设备尺寸设定。
推荐使用移动优先策略（mobile-first），即先写小屏样式，再通过 min-width 逐步增强大屏样式。
常见断点参考：
实际项目中常用断点组合：
/* 手机默认样式 */.container { width: 100%; }
@media (min-width: 768px) {
.container { width: 750px; }
}
@media (min-width: 1024px) {
.container { width: 1000px; }
}
实用建议与注意事项
合理使用媒体查询能提升用户体验，但需注意以下几点：
- 避免过度依赖设备像素，应以内容布局变化为准设置断点
- 尽量使用 min-width 而非 max-width，便于维护和扩展
- 可将常用断点定义为SCSS变量或CSS自定义属性，提高复用性
- 测试时使用浏览器开发者工具模拟不同设备，确保流畅过渡
基本上就这些，掌握好语法结构和断点逻辑，响应式布局就能更得心应手。
