百分比宽度和flex-grow需合理组合才能解决比例失衡：须确保父容器有明确宽度上下文，flex-grow需配合flex-basis与flex-shrink，关键元素设min-width，并结合媒体查询实现阶梯式响应。
用百分比宽度和 flex-grow 确实能提升自适应能力，但单独依赖这两者往往解决不了比例失衡问题——关键在于它们的使用前提和组合逻辑是否合理。
百分比宽度不是万能的，得看父容器有没有“基准”
百分比是相对于父容器计算的。如果父容器本身宽度假设为 auto（比如未设置宽度的 div 在文档流中），那子元素设 width: 50% 实际可能撑不满、也可能溢出，尤其在小屏下文字换行或图片缩放不及时时，视觉比例就乱了。
- 确保父容器有明确的宽度上下文：比如设
width: 100%或用max-width配合margin: 0 auto - 对图片、视频等替换元素，加上
max-width: 100%; height: auto;防止溢出 - 避免嵌套多层百分比，每多一层就多一分累积误差
flex-grow 要配合 flex-basis 和 flex-shrink 才可控
flex-grow 只决定剩余空间怎么分，不控制基础尺寸。如果所有子项都设 flex: 1，但内容长度差异大（比如一个按钮 vs 一段长标题），小屏下仍会挤压变形。
- 优先用
flex: 0 1 auto（不放大、可缩小、按内容定基线）保基本结构 - 需要等分时，写
flex: 1 1 0，把flex-basis设为0，让 grow 真正均分剩余空间 - 给关键元素加
min-width或min-height，防止被过度压缩（如按钮不能窄于 80px）
必须搭配响应式断点做兜底
纯流体布局在极端尺寸（比如 iPhone SE 宽度 375px 或折叠屏横竖切换）下依然容易崩。CSS 百分比和 flex 是“连续适应”，但设计通常是“阶梯适应”。
立即学习“前端免费学习笔记（深入）”；
- 用
@media (max-width: 768px)切换布局方向：比如 PC 横排卡片 → 移动端堆叠 - 在小屏下调低
flex-grow值，或改用flex-direction: column重排主轴 - 对图标+文字组合，用
flex-wrap: wrap+min-width防止文字被挤到下一行错位
字体和间距也得“相对化”
元素比例失衡常不只是宽高问题，字号、内边距、外边距不随设备缩放，也会破坏视觉平衡。
- 用
rem配合根字体动态调整：html { font-size: clamp(14px, 2.5vw, 16px); } - 内边距/外边距优先用
em或rem，避免固定px值卡死缩放 - 对关键模块（如导航栏、卡片标题）单独设
font-size媒体查询，比全局缩放更精准
