根本原因是 box-sizing: content-box 导致 padding 和 border 额外增加宽度；应全局设 box-sizing: border-box，图片加 max-width: 100%; height: auto;，断点依内容临界点选 em 单位，字体用 clamp() 动态缩放。
为什么用 width: 100% 还会溢出屏幕
常见现象是：容器设了 width: 100%，但内容（比如图片、内边距、边框）导致实际宽度超出了视口。根本原因在于 css 盒模型默认使用 box-sizing: content-box，此时 padding 和 border 会额外增加尺寸。
- 所有布局根容器建议统一加：
*, *::before, *::after { box-sizing: border-box; } - 避免在响应式容器里写死
px宽度，尤其是max-width或margin；优先用rem、%或clamp() - 图片务必加
max-width: 100%; height: auto;，否则高分辨率下会撑破父容器
媒体查询断点怎么选才不翻车
别直接抄 bootstrap 的 768px、992px —— 这些是历史遗留的设备宽度，不是内容临界点。真正该看的是「你的内容在哪一屏开始挤不开」。
- 先用浏览器调试工具拖动窗口宽度，观察文字换行、卡片堆叠、导航栏折叠的自然临界点
- 断点值优先用
em（如@media (min-width: 48em)），它基于用户设置的字体大小，比px更可访问 - 避免写太多断点，3–4 个足够：移动端、小平板、桌面、大屏；用
min-width向上增强，别用max-width向下覆盖
flex 和 grid 在响应式里谁更适合
不是谁“更好”，而是谁更贴合当前布局意图。Flex 适合一维流式排列（比如导航条、按钮组），Grid 适合二维网格（比如图文卡片墙、表单字段对齐）。
- 用
flex-wrap: wrap+flex-basis控制卡片列数，比写多个媒体查询更简洁.card-list { display: flex; flex-wrap: wrap; gap: 1rem; } .card { flex-basis: calc(50% - 0.5rem); } @media (min-width: 768px) { .card { flex-basis: calc(33.333% - 0.666rem); } } - Grid 推荐用
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))，自动适配列数且不依赖断点 - 注意 safari 旧版本对
gap支持差，必要时用margin回退
字体和间距在不同屏上缩放不一致
固定 px 字号在小屏上看不清，大屏上又过大；用 rem 只解决了一半——它依赖根字号，而根字号本身没响应。
立即学习“前端免费学习笔记（深入）”；
- 给
html设动态字号：html { font-size: clamp(14px, 2.5vw, 18px); }这样从手机到 4K 屏都能保持可读性
- 行高、外边距也用
rem或em，避免混用px导致比例失调 - 慎用
vh/vw做高度，ios Safari 的地址栏收放会触发视口高度跳变，改用min-height: 100dvh（dvh是设备视口高度，已兼容主流浏览器）
实际失衡往往不是某一行代码错了，而是盒模型、单位、断点逻辑、缩放机制这几层叠加出来的连锁反应。调一个参数前，先确认它在哪个层面起作用。