17370845950

响应式布局核心是精准选断点、稳定改样式；优先用 viewport 宽度（px）设断点，移动优先，抽离公共断点，避免 device-width 和 em，确保 viewport meta 存在。

用 @media 写响应式布局，核心是断点选得准、样式改得稳

别一上来就堆 max-width 和 min-width，先想清楚设备真实 viewport 宽度和用户交互方式。主流断点不是凭空定的，而是基于常见设备的 CSS 像素宽度（比如 iPhone SE 是 375px，iPad Pro 横屏是 1024px），再结合内容可读性微调。实际项目中，推荐从移动优先起步，用 @media (min-width: 768px) 覆盖平板，@media (min-width: 1024px) 覆盖桌面，比硬套“手机/平板/桌面”三档更可靠。

• 避免用设备像素比（dpr）或物理尺寸做判断，CSS 媒体查询只认 viewport 的 CSS 像素宽度
• 别在每个组件里重复写相同断点，把公共断点抽成 CSS 自定义属性或预处理器变量（如 --bp-tablet: 768px）
• 注意 width 和 device-width 的区别：前者查 viewport 宽度（推荐），后者查设备屏幕宽度（已过时，且在 iOS Safari 横竖屏切换时会出错）

@media 里该用 em 还是 px？

统一用 px。虽然 W3C 文档说 em 更“可访问”，但实际中它依赖根字体大小，而用户缩放页面时，现代浏览器对 px 断点的处理已足够健壮。用 em 反而容易因 font-size 层层继承导致断点漂移——尤其在用了 rem 布局的项目里，@media (min-width: 48em) 实际对应的是 48 × root font-size，根本不可控。

• Chrome、Firefox、Safari 对 px 断点的触发逻辑一致，无需 polyfill
• 如果真要支持旧版 IE（IE9+），它只认 px，不支持 em 断点
• 所谓“用 em 更适配缩放”是误解：用户放大文字时，viewport 宽度（以 px 计）不变，断点依然有效

为什么加了 @media 样式没生效？常见漏点

最常被忽略的是 HTML 中漏了 viewport meta 标签。没有它，移动端浏览器会默认按 980px 渲染，@media (max-width: 480px) 永远不会触发。

• 检查是否在 或外部 CSS 文件中正确嵌套了 @media，不能写在 @keyframes 或其他 at-rule 内部
• 确认 CSS 选择器权重没被更高优先级规则覆盖（比如内联样式或 !important）
• 用 Chrome DevTools 的 “Toggle device toolbar” 切换设备后，看 Elements 面板右上角是否显示当前匹配的媒体查询

响应式图片和容器怎么配合 @media？

@media 控制布局结构， 和 srcset 控制资源加载——两者分工明确，别混用。比如你用 @media (min-width: 768px) 把侧边栏设为 display: block，那对应的大图就应该用 srcset 提供更高分辨率版本，而不是靠媒体查询去换 background-image。

• 容器宽度用 @media 调整（如 max-width: 1200px），内部图片用 width: 100% + height: auto 自适应
• 需要艺术指导（art direction）时才用 ，比如手机端显示裁剪后的特写，桌面端显示完整场景
• 避免用 @media 给 background-image 换图：它不阻止小图在桌面端下载，浪费带宽

真正难的不是写几个 @media 块，而是判断哪些样式必须随视口变化、哪些该保持一致。比如导航栏折叠逻辑、表单控件尺寸、文字行高，这些细节一旦忽略，多设备体验就断层了。