媒体查询必须写在样式表顶层，不能嵌套在CSS选择器内部；推荐使用min-width实现移动优先；常见失效原因包括优先级覆盖、加载顺序错误和浏览器缓存；断点应统一用px单位。
媒体查询写在哪儿才生效
CSS 媒体查询必须写在样式表中，且要放在对应选择器的外层包裹里，不能嵌套在普通规则内部（比如不能写在 .header { ... } 里面再加 @media）。否则浏览器直接忽略。
- ✅ 正确位置：
@media (max-width: 768px) { .container { width: 100%; padding: 0 12px; } } - ❌ 错误写法：
.container { width: 1200px; @media (max-width: 768px) { width: 100%; /* 大部分浏览器不识别这种嵌套 */ } } - 如果用 Sass/Less 等预处理器，嵌套语法才被支持，但最终编译出的 CSS 仍是平级的
@media块
用 min-width 还是 max-width 更可靠
优先用 min-width 实现“移动优先”，避免断点覆盖混乱。很多布局错乱是因为多个 max-width 规则叠加后，小屏幕样式被大屏规则意外覆盖。
-
min-width是渐进增强：基础样式适配手机，然后逐步加宽适配平板、桌面 -
max-width是降级处理：默认按桌面写，再收缩适配小屏，容易漏掉中间尺寸或覆盖出错 - 典型断点建议：
@media (min-width: 768px)（平板）、@media (min-width: 1024px)（桌面） - 不要混用两种逻辑写在同一套样式里，否则调试时很难理清哪条规则最终生效
为什么改了媒体查询，页面还是没变
常见原因不是语法错，而是优先级或加载顺序问题。
- 检查是否被更高优先级的选择器覆盖，比如
.sidebar.active比@media ... .sidebar权重高 - 确认样式表加载顺序：后加载的 CSS 中的媒体查询会覆盖前面同条件的规则
- 浏览器缓存常导致旧 CSS 生效，强制刷新（
Ctrl+Shift+R或禁用缓存调试） - 设备像素比影响实际宽度判断：iPhone SE 屏幕物理宽度 320px，但 CSS 宽度是 375px（@2x），用开发者工具的“响应式模式”选真实设备型号更准
Flex/Grid 在媒体查询里怎么安全切换布局
不要只改容器 display，还要同步处理子项行为，否则容易出现溢出或塌陷。
立即学习“前端免费学习笔记（深入）”；
- 从
display: grid切到display: flex时，记得重置grid-template-columns和gap，否则可能残留无效声明 - Flex 方向切换要配
flex-wrap：@media (max-width: 600px) { .nav { display: flex; flex-direction: column; flex-wrap: nowrap; /* 避免小屏下意外换行撑高容器 */ } } - Grid 列数动态调整更稳妥：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))比固定repeat(3, 1fr)更适应不同宽度
实际项目中最容易被忽略的是：媒体查询里的单位要用 px（而非 em 或 rem）做断点值，因为浏览器依据的是视口宽度，不是字体大小。用 em 断点会导致用户缩放页面时触发错误的布局切换。
