@media断点应基于容器行为设为480px、900px、901px三档，需HTML viewport标签、选择器权重足够且避免冗余声明；window.innerWidth无法替代@media，因其不响应旋转、系统缩放等真实渲染变化。
直接用 @media 写断点就能让页面随屏幕缩放实时响应，但多数人卡在断点设不准、样式不生效、或误用 JavaScript 检测宽度——这三类问题占实际调试耗时的 80% 以上。
为什么 window.innerWidth 不能替代 @media
用 JavaScript 监听 window.innerWidth 并手动切换 class，看似可控，实则漏掉关键场景：
- 设备旋转（比如手机从竖屏转横屏）时，
resize事件可能不触发或延迟 - 系统级缩放（Windows 缩放设置为 125%）、浏览器分屏、DevTools 切换设备模拟器，这些都不会改变
window.innerWidth的逻辑像素值，但会真实影响布局渲染 - CSS 媒体查询是声明式、惰性求值的，浏览器原生优化；JS 是命令式、需主动维护状态，容易出现 class 残留或竞态
真正需要 JS 干预的，只有极少数场景：比如根据视口宽高比动态加载不同比例的视频 poster，或读取 matchMedia() 返回的 matches 状态做轻量逻辑分支。
@media 断点该按什么数值设？
别抄网上“320–480–768–1024”这种过时机型尺寸。2026 年主流断点应基于容器行为而非设备型号：
立即学习“前端免费学习笔记（深入）”；
- 小屏：用
@media (max-width: 480px)处理单列堆叠、隐藏次要操作项（如筛选按钮） - 中屏：用
@media (min-width: 481px) and (max-width: 900px)启用双列网格、展开折叠导航 - 大屏：用
@media (min-width: 901px)触发三栏布局、固定侧边栏、增大行高提升可读性
注意：所有断点值必须互斥且无间隙，例如 max-width: 480px 和 min-width: 481px 才能确保任意宽度必命中且仅命中一个规则。
为什么加了 @media 样式却不生效？
最常被忽略的三个硬性前提：
- HTML 必须有
<meta name="viewport" content="width=device-width, initial-scale=1">，缺它等于没写媒体查询 - 媒体查询里的选择器优先级不能低于基础样式，比如基础写了
.card { width: 100%; }，媒体查询里就得用同级或更高权重（如.card.responsive { width: 50%; }或加!important—— 但后者不推荐） - 别在
@media里重复定义未变动的属性，比如基础样式已设font-size: 16px，媒体查询只改padding就够，全写反而增加维护成本
另外，Chrome DevTools 的 “Toggle device toolbar” 右上角有个 “Show media queries” 小图标，点开能直观看到当前激活的是哪一段断点，比反复刷新快得多。
真正难的不是写对语法，而是判断某个组件在 480px 宽度下是否该隐藏、折叠还是重构结构——这得靠真机测试 + 用户视线路径分析，而不是套模板。
