断点应按内容需求而非固定像素设定，优先移动优先用min-width逐级增强；rem基于根字体更可控但需@media兜底；box-sizing必须设为border-box；flex布局要显式声明flex-wrap；正文字号用clamp()保底限高。
用 @media 匹配不同屏幕宽度时，断点怎么选才不踩坑
别直接套用 768px / 1024px 这类“教科书断点”。真实设备像素比、浏览器缩放、桌面端窗口手动拖拽都会让实际可用宽度和预想不一致。优先按内容撑开需求定断点，比如导航栏换行、卡片从三列塌成两列的临界点，用浏览器开发者工具的响应式调试模式拖动宽度实时观察。
常见错误是写太多断点：@media (max-width: 480px) { ... }、@media (min-width: 481px) and (max-width: 768px) { ... } 这种叠加容易漏覆盖或互相覆盖。推荐移动优先，用 min-width 逐级增强：
body { font-size: 16px; }
@media (min-width: 768px) { body { font-size: 18px; } }
@media (min-width: 1024px) { body { font-size: 20px; } }字体大小用 rem 而不是 px 或 em 的实际原因
rem 相对于根元素 html 的 font-size，只要改一处就能批量调整全站文字比例，且不会因嵌套组件导致计算失真（em 会层层继承放大）。但要注意：iOS Safari 在横屏切换时可能不触发 html 字体重算，所以别只靠 JS 动态改 document.documentElement.style.fontSize，得配合 @media 做兜底。
安全做法是：
立即学习“前端免费学习笔记（深入）”；
- 基础字号设为
16px（多数浏览器默认），保证可读性底线 - 在
@media中统一调html { font-size: 18px; }，而非每个选择器里写font-size: 1.125rem - 避免对
input、button等表单控件单独设rem，它们在部分安卓机上会因系统缩放失效
排版错乱时，先查 box-sizing 和 flex 容器的 flex-wrap
响应式下最常被忽略的是盒模型行为变化。默认 box-sizing: content-box 会让 width: 100% + padding 导致溢出，必须全局重置：
* { box-sizing: border-box; }另外，用 display: flex 布局时，子项默认 flex-wrap: nowrap，一旦内容变宽就会横向滚动或挤压。移动端应显式写：
.grid { display: flex; flex-wrap: wrap; }
.grid > * { flex: 1 1 calc(50% - 10px); }注意 calc() 里的减法单位必须一致（不能 50% - 1rem 混用），否则整个声明无效。
字体大小随视口缩放，但别用 vmin 或 vw 直接设正文
font-size: 2vmin 看似聪明，实则危险：小屏上字号可能缩到 10px 以下，丧失可读性；大屏又可能突然跳到 32px，破坏行高节奏。它适合标题、装饰性文字等非关键信息。
正文必须保底+上限：
p {
font-size: clamp(1rem, 4vmax, 1.25rem);
line-height: 1.5;
}其中 clamp(最小值, 弹性值, 最大值) 是目前最稳妥的流体排版方案，但 IE 不支持，如需兼容就得退回多层 @media。
真正难的是图文混排时图片宽高比和文字行数的耦合——这部分没法靠 CSS 自动对齐，得靠设计阶段就约定好图片尺寸档位，再用 aspect-ratio + object-fit 控制，否则响应式只会放大错位。
