应优先使用 @media 查询实现响应式布局，因其基于视口宽度原生生效、不依赖 JavaScript、避免 SSR 不一致和重排开销；推荐以 min-width 递进定义断点，与设计稿对齐，确保语义清晰、维护性强。
直接用 @media 查询，别依赖 JavaScript 判断屏幕尺寸做样式切换——CSS 原生支持设备范围划分，更可靠、更轻量、更符合响应式设计本意。
用 @media 写断点，而不是查 window.innerWidth
CSS 媒体查询是响应式布局的基石，它基于视口（viewport）实际宽度触发样式规则，不依赖 JS 运行时状态，避免了重排、监听开销和 SSR 不一致问题。
-
@media规则在 CSS 解析阶段就生效，服务端渲染（SSR）或静态生成（如 Next.js、Nuxt）也能正确输出对应样式 - JS 的
window.innerWidth在页面加载初期可能为 0（尤其 SSR 场景），或因缩放、地址栏遮挡导致误判 - 移动端 Safari 横竖屏切换时，
resize事件有延迟，而@media是即时响应的
@media 中常用的设备范围写法
主流做法是按最小宽度（min-width）递进定义断点，语义清晰且便于维护。不要用 max-width 叠加，容易遗漏覆盖或产生冲突。
@media (min-width: 768px) {
.container { width: 750px; }
}
@media (min-width: 992px) {
.container { width: 970px; }
}
@media (min-width: 1200px) {
.container { width: 1170px; }
}
- 断点值建议与设计稿对齐，例如
768px对应平板竖屏、992px对应小桌面、1200px对应常规桌面 - 避免使用设备像素比（
device-pixel-ratio）或orientation作为主断点依据——它们不稳定，且不能反映真实布局空间 - 慎用
max-width组合，比如@media (min-width: 768px) and (max-width: 991.98px)，小数点后精度易出错，也难维护
如何处理高 DPI 屏幕下的像素混淆
用户常误以为“Retina 屏要写两倍像素”，其实 CSS 像素（CSS px）和设备物理像素无关——@media 中的宽度永远指 CSS 像素，也就是视口宽度（document.documentElement.clientWidth），不是 window.screen.width。
立即学习“前端免费学习笔记（深入）”；
- 不需要为高清屏单独写
@media (-webkit-min-device-pixel-ratio: 2)来放大字体或图片——那属于图像资源适配范畴，应由srcset或image-set()处理 - 如果发现某设备上断点“没生效”，先检查
<meta name="viewport" content="width=device-width, initial-scale=1">是否缺失——没有它，移动端会以 980px 虚拟视口渲染，@media就全乱了 - 调试时用浏览器开发者工具的「Toggle device toolbar」，选中具体设备并勾选「Show device frame」，能更真实模拟 viewport 行为
真正难的不是写几个 @media，而是统一团队对“断点含义”的理解：它代表的是内容承载能力，不是某个手机型号。一旦把 768px 当成“iPad 专属”，后续遇到折叠屏、Chromebook 或横屏手机就会反复打补丁。
