媒体查询断点应匹配真实设备逻辑并分层设置（如320px、480px、768px等），配合rem实现字号与间距自适应，优先使用Flexbox/Grid布局，确保viewport正确设置，并区分核心响应对象与视觉细节。
媒体查询的断点设置要匹配真实设备逻辑
直接用 min-width 或 max-width 做断点，但值不能拍脑袋定。比如写 @media (max-width: 768px)，实际会把 iPad 竖屏（768px 宽）和很多安卓平板（如 800px 宽）都归进“移动端”，导致布局错乱。更稳妥的做法是按设计系统或设备能力分层：320px（窄屏手机）、480px（小屏手机横屏）、768px（平板竖屏）、1024px（平板横屏/小桌面）、1200px（常规桌面）。这些不是硬性标准，但需与设计稿对齐，且避免重叠断点（如同时写 max-width: 768px 和 min-width: 768px）。
用 rem + 媒体查询实现字号与间距自适应
仅靠媒体查询改布局结构不够，字体、内边距、外边距也得响应。推荐在根元素动态改 font-size，再让所有尺寸单位基于 rem。这样只需一处调整，全局缩放生效。
:root {
font-size: 16px;
}
@media (max-width: 480px) {
:root {
font-size: 14px;
}
}
@media (min-width: 1200px) {
:root {
font-size: 18px;
}
}
h1 { font-size: 2rem; } /* 实际对应 28px / 36px / 32px */
p { margin-bottom: 1.2rem; }注意：不要在媒体查询里反复重写每个元素的 px 值，那样维护成本高、易遗漏。
Flexbox / Grid 配合媒体查询比纯 float 更可靠
老式浮动布局在断点切换时容易塌陷、清除不干净；而 display: flex 或 display: grid 天然支持方向、顺序、换行控制，配合媒体查询能写出更简洁的响应逻辑。
立即学习“前端免费学习笔记（深入）”；
- 横向菜单 → 竖向折叠菜单：用
flex-direction: column+flex-wrap: wrap - 三栏卡片 → 单栏滚动：用
grid-template-columns: repeat(3, 1fr)→repeat(1, 1fr) - 隐藏非关键组件：优先用
display: none，而不是visibility: hidden（后者仍占布局空间）
特别注意：Grid 的 auto-fit 和 auto-fill 在媒体查询中可动态调节列数，比写死断点更灵活：
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}viewport 设置错误会让媒体查询完全失效
如果页面没加正确的 <meta> 标签，iOS Safari 和 Android Chrome 会强制以桌面视口渲染，max-width: 480px 这类查询永远不触发。
必须确保 <head> 中有：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
常见错误包括：width=1024 写死宽度、漏掉 initial-scale=1.0（导致双击缩放异常）、或用了 user-scalable=no（影响可访问性）。没有这行，所有媒体查询调试都是白忙。
自动布局真正的难点不在语法，而在理解「哪些样式该由媒体查询接管」——比如按钮圆角、阴影、过渡动效这类视觉细节，通常不该随尺寸变化；而栅格列数、导航结构、图文比例，才是核心响应对象。混在一起改，反而让 CSS 更难维护。
