响应式布局核心是精准选断点、稳定改样式；优先用 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 块，而是判断哪些样式必须随视口变化、哪些该保持一致。比如导航栏折叠逻辑、表单控件尺寸、文字行高，这些细节一旦忽略，多设备体验就断层了。 
