css 页面在不同屏幕比例下拉伸怎么办_使用百分比和相对单位

百分比布局失效主因是父容器无宽高或宽高比失控，应优先用 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 自身的响应能力很快见底。