width: 100% 是最基础的自适应宽度手段，但仅对父容器有明确宽度的元素生效；若父容器未撑开（如 body 缺少 width 和重置 margin/padding），则失效；需配合 viewport meta、max-width/min-width 及 display 调整才能可靠实现响应式。
直接说结论：用 width: 100% 是最基础的自适应宽度手段，但**它只对“父容器有明确宽度”的元素生效**；如果父容器本身没撑开，width: 100% 就会失效——这是绝大多数人踩坑的起点。
为什么 width: 100% 有时没反应？
因为百分比宽度是相对于父元素计算的，而 html 和 body 默认不继承视口宽度。比如你写：
<div style="width: 100%;">内容</div>
这段 div 的父元素是 body，但 body 默认有 margin，且未显式设宽，所以 100% 实际算出来可能只有几百像素。
- 必须同时重置
html和body的margin、padding，并设width: 100% -
html元素默认宽度确实是 100% 视口，但body不是——它是个普通块级元素，受用户代理样式影响 - 移动端尤其要注意：
viewportmeta 标签缺失会导致100%按缩放后宽度计算，不是设备物理宽度
max-width 和 min-width 才是响应式核心
纯 width: 100% 在大屏上会无限拉伸，文字过长、图片失真。真正可控的自适应靠的是组合：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
div.container {<br> width: 100%;<br> max-width: 1200px;<br> min-width: 320px;<br> margin: 0 auto;<br>}
-
width: 100%确保小屏下填满 -
max-width防止大屏下内容过散（常见值：960px、1140px、1200px） -
min-width避免在超小屏（如折叠屏竖向）下被压缩到无法阅读 -
margin: 0 auto让居中生效——注意：这要求元素是块级且有明确宽度（max-width就够了）
哪些元素不能直接用 width: 100%？
内联元素（如 span、a、strong）默认无视 width，必须先改显示模式：
-
display: inline-block：保留行内流特性，支持宽高 -
display: block：转为块级，独占一行，width生效 -
input、img、iframe这类替换元素可直接设width，但img更推荐用max-width: 100%+height: auto防失真 -
table默认是“收缩包裹”行为，设width: 100%才会撑满父容器
移动端必须加的那行 meta
没有这句，width: 100% 在手机浏览器里基本等于白写：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
width=device-width告诉浏览器：页面宽度 = 设备逻辑宽度（不是物理像素） - 缺了它，iOS Safari 会按 980px 渲染，
100%就是按 980px 算，导致内容被缩放挤压 - 不要写成
width=100%或width=100vw——无效，浏览器不认
真正难的不是写 width: 100%，而是搞清每一层父容器的宽度来源。建议用浏览器开发者工具的盒模型预览逐层检查，而不是凭感觉改 CSS。
