你可能会说
这个页面在手机上排版全乱了，文字太小、按钮挤在一起。
媒体查询是 CSS 中根据设备特征（屏幕宽度、方向、暗色模式等）应用不同样式的条件语句。
CSS 里的一种条件判断：「如果屏幕宽度小于 768px，就应用这套样式」。响应式设计的底层实现就是它。
生活类比
像空调的自动模式——检测到室温高于 28 度就制冷。媒体查询检测到屏幕变窄就换布局。
🎮 动手试试
👇 拖动滑块模拟不同屏幕宽度
关于「媒体查询」，以下哪个描述最准确？
你可以这样告诉 AI
帮我加响应式适配：768px 以下单列布局、导航变汉堡菜单、字号缩小；768-1024px 两列；1024px 以上三列。
断点是媒体查询中设定的具体宽度值（如 768px），媒体查询是实现断点的 CSS 语法。
媒体查询看「屏幕多宽」，容器查询看「父容器多宽」——组件级响应式。
响应式断点适配
在 768px、1024px 等断点切换布局、字号、间距，一套代码适配手机到桌面所有尺寸。
和 AI 协作时
想让 AI 做手机适配时，直接说「加个媒体查询，768px 以下单列布局、导航变汉堡菜单」。
使用 Tailwind 的项目
Tailwind 用 md: lg: 等前缀内联响应式，不需要手写 @media，避免混用两种方式造成样式冲突。
固定尺寸的大屏应用
只在 1920px+ 桌面端使用的内部系统，不需要媒体查询做多端适配。
CSS 里的一种条件判断：「如果屏幕宽度小于 768px，就应用这套样式」。响应式设计的底层实现就是
像空调的自动模式——检测到室温高于 28 度就制冷。媒体查询检测到屏幕变窄就换布局。
和 AI 沟通时提到「加个媒体查询适配手机」，就是写一段针对小屏幕的样式规则。