如何用CSS媒体查询实现响应式网页布局？

@media断点应基于容器行为设为480px、900px、901px三档，需HTML viewport标签、选择器权重足够且避免冗余声明；window.innerWidth无法替代@media，因其不响应旋转、系统缩放等真实渲染变化。

直接用 @media 写断点就能让页面随屏幕缩放实时响应，但多数人卡在断点设不准、样式不生效、或误用 JavaScript 检测宽度——这三类问题占实际调试耗时的 80% 以上。

为什么 window.innerWidth 不能替代 @media

用 JavaScript 监听 window.innerWidth 并手动切换 class，看似可控，实则漏掉关键场景：

1. 设备旋转（比如手机从竖屏转横屏）时，resize 事件可能不触发或延迟
2. 系统级缩放（Windows 缩放设置为 125%）、浏览器分屏、DevTools 切换设备模拟器，这些都不会改变 window.innerWidth 的逻辑像素值，但会真实影响布局渲染
3. CSS 媒体查询是声明式、惰性求值的，浏览器原生优化；JS 是命令式、需主动维护状态，容易出现 class 残留或竞态

真正需要 JS 干预的，只有极少数场景：比如根据视口宽高比动态加载不同比例的视频 poster，或读取 matchMedia() 返回的 matches 状态做轻量逻辑分支。

@media 断点该按什么数值设？

别抄网上“320–480–768–1024”这种过时机型尺寸。2026 年主流断点应基于容器行为而非设备型号：

1. 小屏：用 @media (max-width: 480px) 处理单列堆叠、隐藏次要操作项（如筛选按钮）
2. 中屏：用 @media (min-width: 481px) and (max-width: 900px) 启用双列网格、展开折叠导航
3. 大屏：用 @media (min-width: 901px) 触发三栏布局、固定侧边栏、增大行高提升可读性

注意：所有断点值必须互斥且无间隙，例如 max-width: 480px 和 min-width: 481px 才能确保任意宽度必命中且仅命中一个规则。

为什么加了 @media 样式却不生效？

最常被忽略的三个硬性前提：

1. HTML 必须有 <meta name="viewport" content="width=device-width, initial-scale=1">，缺它等于没写媒体查询
2. 媒体查询里的选择器优先级不能低于基础样式，比如基础写了 .card { width: 100%; }，媒体查询里就得用同级或更高权重（如 .card.responsive { width: 50%; } 或加 !important —— 但后者不推荐）
3. 别在 @media 里重复定义未变动的属性，比如基础样式已设 font-size: 16px，媒体查询只改 padding 就够，全写反而增加维护成本

另外，Chrome DevTools 的 “Toggle device toolbar” 右上角有个 “Show media queries” 小图标，点开能直观看到当前激活的是哪一段断点，比反复刷新快得多。

真正难的不是写对语法，而是判断某个组件在 480px 宽度下是否该隐藏、折叠还是重构结构——这得靠真机测试 + 用户视线路径分析，而不是套模板。