小屏破版的核心解法是采用 width: 100% + max-width + box-sizing: border-box 组合：百分比宽度实现弹性缩放，max-width 限定最大宽度防止过度拉伸，box-sizing: border-box 确保 padding/border 不撑宽容器。
小屏破版通常是因为用了固定像素宽度（比如 width: 1200px），在手机或窄屏设备上直接溢出、横向滚动，体验很差。核心解法不是“去掉固定宽度”，而是用更弹性的组合：百分比宽度打底 + max-width 保上限 + 配合 box-sizing: border-box 防撑开。
用百分比宽度替代固定 width
把容器的 width 改成相对单位，比如 width: 100% 或 width: 90%，让它随视口缩放。注意：百分比是相对于父容器计算的，所以确保父级没有意外的固定宽或 overflow: hidden 干扰。
- 常见写法：
width: 100%; max-width: 1200px;—— 宽屏下最多 1200px，小屏自动收缩 - 导航栏、内容区、卡片等通用容器都适用这种模式
- 避免对
html或body设固定宽，否则整个页面会被锁死
配合 max-width 控制最大显示尺寸
max-width 是关键“安全阀”。它不强制拉伸，只在空间足够时起作用。和 width: 100% 搭配，既能响应式，又保留设计预期的阅读宽度。
- 典型值：
max-width: 1200px（桌面主流）、max-width: 768px（平板断点） - 可结合
margin: 0 auto居中，避免贴边拥挤 - 慎用
min-width，它容易导致小屏必须横向滚动
别忘了 box-sizing 和 padding/margin
默认 box-sizing: content-box 会让 padding 和 border 额外加宽，导致实际宽度超预期。小屏下这点误差就可能破版。
立即学习“前端免费学习笔记（深入）”；
- 全局重置推荐：
* { box-sizing: border-box; } - 内边距改用
padding: 1rem这类相对单位，比padding: 20px更适应不同屏幕 - 外边距慎用固定像素，尤其
margin-left: 200px类绝对定位偏移
简单验证与调试技巧
不用等上线，浏览器开发者工具就能快速判断是否真适配：
- 按
Ctrl+Shift+M（Chrome）开启响应式调试，拖动宽度看断点表现 - 检查元素 computed 样式里
width是否随窗口变化，max-width是否生效 - 在窄屏下右键 → “检查” → 看是否有元素宽度 > 100vw 或触发横向滚动条
基本上就这些。不复杂但容易忽略，重点就是放弃“一刀切”的固定宽，用 width: 100% 扛弹性，max-width 守底线，再把盒模型和间距单位理清楚，小屏破版问题基本就稳了。
