请解释响应式布局的核心概念，并说明媒体查询（Media Query）在实际开发中的具体使用方式。

回答思路

1. 【回答框架 1】响应式布局是一种网页设计方法，旨在通过一套代码适应不同屏幕尺寸和设备类型，提升用户体验。其核心基于CSS3的媒体查询、流式网格布局（如使用相对单位）和弹性图片等技术。媒体查询是响应式布局的关键工具，允许根据视口宽度、设备特性等条件应用不同样式。
2. 【回答框架 2】媒体查询使用@media规则，可以包含一个或多个条件，例如@media (max-width: 768px) { ... }，当视口宽度不超过768px时应用花括号内的样式。条件可以是宽度、高度、方向（orientation）、分辨率等。使用时常见做法是移动端优先（先写基础样式，再用min-width适配大屏）或桌面端优先（max-width适配小屏）。
3. 【回答框架 3】实际开发中，媒体查询通常用于调整布局的列数、字体大小、间距、元素显隐等。例如在桌面端显示三列，平板显示两列，手机显示单列。此外，常结合断点（breakpoint）来定义关键阈值，如768px、992px等，但断点选择需基于内容设计而非固定设备。
4. 【回答框架 4】除了宽度，媒体查询还能检测其他媒体特性，如屏幕方向（orientation: landscape）、分辨率（min-resolution）等，甚至可以使用逻辑操作符（and、or、not）组合条件。需要注意的是，媒体查询仅控制CSS样式，不改变HTML结构，因此有时需配合弹性布局（flex/grid）和相对单位（%、vw/vh）来增强适应性。
5. 【回答框架 5】使用媒体查询时，应避免过度依赖，尽量采用移动端优先和渐进增强策略，并在多设备上测试。此外，现代CSS特性（如容器查询）提供了新思路，但媒体查询仍是主流方案。
6. 【关键点 1】响应式布局核心是适应不同屏幕尺寸，常用技术包括媒体查询、弹性网格和相对单位。
7. 【关键点 2】媒体查询通过@media规则根据视口等条件应用样式，支持宽度、方向等特性。
8. 【关键点 3】移动端优先策略常使用min-width断点，从基础样式开始逐步增强。
9. 【关键点 4】断点设置应基于内容，而非固定设备尺寸。
10. 【易错点 1】仅使用媒体查询而不采用弹性布局和相对单位，可能无法平滑适应中间尺寸。
11. 【易错点 2】将断点固定为特定设备宽度（如iPhone）会导致维护困难，应参考内容自然断点。
12. 【易错点 3】媒体查询条件过多且冗余会增加代码复杂度，降低性能，需精简合并。