百分比布局失效主因是父容器无宽高或宽高比失控，应优先用 aspect-ratio、object-fit 或 padding-top 技巧；100vh 在 iOS 有视口偏差，推荐 min-height: 100dvh；Flex/Grid 中百分比需配合 flex-shrink: 0 或统一用轨道控制。
用 % 布局时元素被意外拉伸变形
百分比是相对于父容器尺寸计算的，如果父容器本身没设宽高（比如 body 或 div 没设 height），子元素用 height: 100% 就会失效或塌陷；更常见的是图片、视频、卡片在宽高比变化时被强行拉伸——这不是百分比错了，是没约束宽高比。
- 对图片 / 容器加
aspect-ratio: 16 / 9（现代 浏览器 支持），比单纯设width: 100%; height: 100%可靠得多 - 旧项目可用
padding-top技巧：父容器设position: relative; width: 100%; padding-top: 56.25%（对应 16:9），再把内容用position: absolute填满 - 避免对
img同时设width: 100%; height: 100%，改用object-fit: cover或contain
vw/vh 在移动端缩放时错位
100vw 看似填满屏幕，但在 iOS Safari 横屏切换、地址栏收起时会触发重排，vh 值可能变成视口实际高度（含地址栏）或不包含——导致布局跳动。这不是 bug，是浏览器对“视口”定义不同。
- 关键区域（如全屏轮播、导航栏）慎用
100vh，改用min-height: 100dvh（dvh是动态视口高度，兼容性较好） - 需要精确控制高度的组件，用 JS 动态写入
style.height = window.innerHeight + 'px'，并监听resize和orientationchange -
vw做字体响应式较安全，但避免font-size: 5vw这种极端值，小屏下文字可能过小不可读
Flex/Grid 容器里子项用百分比仍错乱
Flex 或 Grid 容器默认会压缩 / 拉伸子项，此时子项的 width: 50% 可能被忽略，尤其当设了 flex: 1 或 grid-template-columns: 1fr 1fr 时——百分比优先级低于 flex 分配逻辑。
- 想让百分比生效，给子项加
flex: 0 0 auto或flex-shrink: 0，阻止它被压缩 - Grid 中若列模板用
1fr，就别再给子项设width: 30%；要么全用 Grid 轨道控制，要么改用grid-template-columns: 30% 70% - 检查是否误加了
min-width: 0或overflow: hidden，它们会影响百分比计算上下文
/* 示例：安全的响应式卡片宽高比控制 */ .card {width: 100%; aspect-ratio: 4 / 3; background: #eee;} .card img {width: 100%; height: 100%; object-fit: cover;}真正难的不是写百分比，而是判断哪个尺寸该用百分比、哪个该用 rem、哪个必须用 JS 补偿。尤其是涉及视频、Canvas、第三方 SDK 内嵌内容时，CSS 自身的响应能力很快见底。
立即学习 “ 前端免费学习笔记（深入）”；
