第四章：百分比布局——流式布局的基石与边界
说到大屏自适应，百分比布局绝对是个绕不开的话题。我个人习惯把它叫做「流式布局的入门钥匙」。你想想看，当我们面对各种尺寸的屏幕时，最直观的想法是什么？——让元素跟着容器走，对吧？
百分比布局就是干这个的。它让元素的宽高、边距、字体大小都基于父容器来计算。说白了，就是「父容器多大，我就占多少比例」。
4.1 百分比与父容器的关系
这里有个关键点，我刚开始做项目时也踩过坑：百分比是相对于父容器的计算值。但不同属性，参考的「父容器」其实不一样。
| CSS属性 | 参考对象 | 注意事项 |
|---|---|---|
| width | 父容器的宽度 | 父容器必须有明确宽度 |
| height | 父容器的高度 | 父容器高度必须显式设置，否则无效 |
| padding / margin | 父容器的宽度（注意！） | 上下padding也参考宽度，不是高度 |
| font-size | 父容器的font-size | 继承链容易混乱 |
嗯，这里要特别提一下 height: 100%。我在项目中遇到过很多次，新手写了个 height: 100%，结果发现根本没效果。为什么？因为父容器的高度是 auto，浏览器不知道100%到底是多少。
height: 100%，结果怎么都不生效。后来发现是父容器没设高度。解决方案是：html, body { height: 100%; }，或者用 vh 单位。
4.2 使用百分比实现流式布局
流式布局的核心思想就是「弹性」。元素宽度用百分比，当屏幕变化时，它们自动伸缩。来看一个典型的例子：
.container {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.left-panel {
width: 30%;
height: 100%;
}
.main-content {
width: 70%;
height: 100%;
}
.card {
width: 25%; /* 一行四个卡片 */
padding: 2%;
box-sizing: border-box;
}
你看，这里用了 box-sizing: border-box。我个人习惯在所有百分比布局里都加上这一句。为什么？因为默认的 content-box 会让 padding 和 border 撑大元素，导致百分比计算不准。
*, *::before, *::after { box-sizing: border-box; }。这样所有百分比计算都基于 border-box，省心很多。
4.3 百分比布局的局限性
说实话，百分比布局虽然好用，但坑也不少。我总结了几个最常见的局限性：
- 高度百分比失效：父容器高度未显式设置时，子元素
height: 100%无效。这是大屏项目里最常见的坑。 - 嵌套过深导致计算复杂：三层以上的百分比嵌套，你很难直观知道最终尺寸是多少。调试起来很痛苦。
- 无法精确控制比例：比如你想让某个元素始终是正方形，用百分比就做不到。得用
aspect-ratio或 padding 技巧。 - 响应式断点处需要额外处理：纯百分比布局在极端小屏或超大屏上，效果可能很差。需要配合媒体查询。
- 字体大小百分比容易失控：
font-size: 80%会让字体越来越小，嵌套多了根本看不清。
vh、vw 或 calc() 处理高度。
4.4 实战中的取舍
我记得有一次做智慧城市的大屏，客户要求适配从 1920x1080 到 3840x2160 的所有分辨率。我一开始全用百分比，结果在 4K 屏上，字体小到看不清，间距也完全不对。
后来我调整了策略：
- 布局框架用百分比（宽度自适应）
- 内边距和间距用
vw单位（随视口变化） - 字体大小用
calc()结合百分比和固定值 - 关键元素用
min-width和max-width兜底
说白了，百分比布局不是万能的。它是个好工具，但得和其他工具配合使用。你想想看，一个锤子能盖房子吗？不能。但锤子加上锯子、尺子，就能了。
vw/vh、calc()、flex、grid 来补充细节。这样既保证了流式效果，又避免了百分比的天生缺陷。
4.5 总结
百分比布局是流式布局的起点，但不是终点。它简单、直观，适合快速搭建自适应框架。但它的局限性也很明显——高度依赖父容器、嵌套后难以控制、字体和间距容易出问题。
嗯，记住一句话：百分比布局做「宽」，其他单位做「高」和「细」。这样组合使用，才能做出真正健壮的大屏自适应方案。