width: 100% 不等于“随屏幕自动变化”，因 html/body 默认不继承视口宽度，且缺 viewport 标签时移动端按虚拟宽度渲染；必须添加 <meta name="viewport" content="width=device-width, initial-scale=1.0">，并配合 max-width: 100%、box-sizing: border-box 及子元素约束（如图片设 max-width: 100%）才能实现真正响应式。
为什么 width: 100% 不等于“随屏幕自动变化”
很多人给 <body> 或最外层容器加 width: 100%，发现页面还是横向滚动、文字挤成一团，或右侧留白。根本原因是：默认情况下，<html> 和 <body> 的宽度不继承视口（viewport）宽度，且没有设置 meta viewport 时，移动端会按 980px 左右的虚拟宽度渲染，完全脱离设备真实尺寸。
必须加的 <meta name="viewport"> 标签
这是响应式网页的起点，缺它一切 CSS 都可能失效。把它放在 <head> 最前面：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
关键参数说明：
-
width=device-width：让页面宽度 = 设备屏幕宽度（不是固定像素，是动态值） -
initial-scale=1.0：禁止双击缩放后页面错位，也避免 iOS Safari 默认缩放文本 - 不要加
user-scalable=no—— 会违反 WCAG 可访问性要求，且部分安卓浏览器会忽略
用 max-width + width: 100% 控制内容区伸缩
直接设 width: 100% 给内容容器往往不够，因为子元素（比如图片、表格）可能自带固定宽度，撑破父容器。更稳妥的做法是：
立即学习“前端免费学习笔记（深入）”；
- 给最外层内容包裹一个
<main>或<div class="container"> - 用
max-width: 100%允许它在小屏下收缩，同时用width: 100%确保它占满可用空间 - 配合
box-sizing: border-box，防止 padding 把宽度撑超
示例 CSS：
main {<br> width: 100%;<br> max-width: 1200px;<br> margin: 0 auto;<br> box-sizing: border-box;<br>}
这样在手机上宽度是 100% 视口，在桌面宽屏上最多到 1200px 居中，不会无限拉伸。
避免常见“自适应失败”的坑
即使写了 viewport 和百分比宽度，仍可能失效，典型原因有：
- 某个祖先元素（比如
<div id="wrapper">）写了width: 960px或min-width: 960px—— 它会卡死整个流式布局 - 图片没设
max-width: 100%; height: auto，原图宽 2000px 就直接撑开页面 - 使用了
white-space: nowrap的文本容器，长单词（如 URL、邮箱）无法换行，强制产生横向滚动条 - CSS 中用了
position: absolute且 left/top 值为固定像素，脱离文档流后不受父容器宽度约束
检查时优先打开浏览器开发者工具，选中 <html> 元素，看 computed width 是否等于当前视口宽度；再逐级往下查哪个节点 width 固定、overflow-x 是否为 hidden/auto。
