百分比高度通常失效，因其依赖父容器有明确高度值；宽度百分比稳定但需配合max-width等约束；flex/grid更推荐替代纯百分比布局；viewport设置和相对字体单位不可或缺。
百分比宽度能用，但高度通常失效
直接给 height 设百分比，在绝大多数场景下不会按预期撑开元素。因为 CSS 中，百分比高度的计算依赖父容器有**明确的高度值**（非 auto）。如果父级没设 height 或设的是 height: auto，子元素的 height: 50% 就会计算为 0px。
常见错误现象：
.container {
width: 80%;
height: 60%; /* 父 body 高度是 auto，这行实际无效 */
}
.item {
width: 50%;
height: 100%; /* 同样无效，因为 container 高度没真正生效 */
}
- 只有当父元素显式设置了
height（如height: 400px或height: 100vh），子元素的百分比高度才可被解析 -
min-height和max-height支持百分比，但同样受限于父级高度是否确定 - 移动端视口单位（
vh/vw）更可靠，它们基于视口而非父容器
流式布局真正可行的组合：width + max-width + padding/margin
纯百分比宽度是流式布局最稳定的部分，但需配合约束机制防止在大屏上过度拉伸。关键不是“只用百分比”，而是控制它的生效边界。
典型写法：
.fluid-card {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 1rem;
}
-
width: 90%保证小屏下缩放，max-width防止桌面端过宽 - 避免对
padding和margin使用百分比，除非你明确需要响应式留白（例如padding: 2% 5%），否则容易导致盒模型混乱 - 若内容含图片或视频，记得加
max-width: 100%和height: auto，防止溢出
flexbox 和 grid 已替代多数传统流式需求
用纯百分比模拟栅格系统（比如“左栏 25%，右栏 75%”）现在基本是过渡方案。现代布局中，flex 和 grid 更可控、语义更强，且天然支持响应式断点。
等效替代示例：
.row {
display: flex;
}
.col-3 { flex: 0 0 25%; }
.col-9 { flex: 0 0 75%; }
<p>/<em> 响应式切换 </em>/
@media (max-width: 768px) {
.col-3,
.col-9 {
flex: 0 0 100%;
}
}
-
flex: 0 0 X%比width: X%更稳妥，它不依赖父容器是否清除浮动或是否触发 BFC - Grid 的
grid-template-columns: 1fr 3fr比硬写百分比更灵活，且自动处理间隙和对齐 - 老项目维护中若必须用百分比，务必检查父级是否意外设置了
overflow: hidden或transform——这些会创建新的包含块，影响百分比计算上下文
viewport 设置和字体单位常被忽略
流式效果最终能否在移动设备上正确呈现，取决于 <meta name="viewport"> 是否存在且配置合理。没有它，移动端浏览器会以桌面视口渲染，导致缩放错乱。
立即学习“前端免费学习笔记（深入）”；
必须包含：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 字体大小别只用
px，搭配rem或em才能随根字体缩放，与流式宽度形成协同 - 慎用
vh做全屏高度：Safari 在地址栏收放时会触发视口高度变化，造成页面跳动；可用min-height: 100vh缓解 - 调试时打开浏览器开发者工具的「Toggle device toolbar」，手动缩放窗口看百分比是否连续变化——卡顿或突变往往意味着某层父容器高度塌陷了
