页面拉伸变形主因是未约束宽高比，正确方案为组合使用max-width: 100%、height: auto、aspect-ratio及display: block，并避免width/height硬值与vh/vw滥用。
页面拉伸变形不是 CSS 写错了，而是你没告诉浏览器“别强行填满，要按比例缩放”。硬套 width: 100vw; height: 100vh 或直接 transform: scale() 是最常见翻车点。
为什么 width/height: 100vh 会让页面变形
它只管占满视口，不管原始宽高比。1920×1080 的设计稿，在 3840×2160 屏上用 100vh 拉满，高度被撑到 2160px，但宽度只到 3840px——比例还是 16:9，看似没问题？错。一旦父容器有 padding、border，或用了 Flex/Grid 的默认 stretch 行为，子元素实际尺寸就失控；更麻烦的是，vh 在 iOS Safari 横屏时会把地址栏高度算进去，数值跳变，布局闪动。
避免方式：
- 不单独依赖
vh/vw控制主体尺寸，尤其不用它们设容器宽高 - 如果必须用，加
min-aspect-ratio: 16 / 9或aspect-ratio: 16 / 9双重约束（注意 Safari 15.4+ 才可靠） - 对 body 或根容器禁用
overflow: auto，改用overflow: hidden防滚动条挤占空间
rem + JS 动态根字号才是真·保比例方案
核心是让整个页面的尺寸单位随视口等比变化，而不是靠拉伸像素块。设计稿按 1920×1080 做，就设基准 html { font-size: 100px; }，再用 JS 算缩放比：document.documentElement.clientWidth / 1920 * 100，赋给 document.documentElement.style.fontSize。
立即学习“前端免费学习笔记（深入）”；
关键细节：
- 监听
resize时加防抖（比如 100ms），否则频繁触发影响性能 - 首次渲染前就要执行一次，不能只等 resize —— 否则首屏白屏或错位
- 所有尺寸（
width、padding、font-size）全用rem，别混用px或% - 若用 Vue/React，别在组件内重复计算根字号，统一挂到
document上，全局响应
aspect-ratio 不生效？先查这三处
aspect-ratio: 16 / 9 不是银弹，它只在“宽度可推导、高度未锁定”时才起作用。写了没反应，八成是被下面某条规则盖过去了：
- 元素本身有
height、min-height或max-height—— 全部删掉，只留height: auto或干脆不写 - 父容器是
display: flex且没设flex-basis或width，导致子项宽度为 0，比例无从计算 - 元素是
inline（如span默认），aspect-ratio对 inline 元素无效，加display: block或inline-block
旧版 Safari（15.0–15.3）会通过 @supports (aspect-ratio: 1/1) 检测，但静默失败。真要兼容，得用 padding-bottom: 56.25% + position: relative + absolute 子元素兜底，不能只靠现代属性。
图片和 video 拉伸？别只写 max-width
max-width: 100% 单独存在时，浏览器不会自动维持宽高比。小图会被拉宽、大图被压扁，尤其在 Flex 容器里高频出现。
正确写法必须组合：
img, video { max-width: 100%; height: auto; display: block; }- 如果父容器没宽度限制（比如裸 div），加
max-width: 100%或width: 90%给它，否则小图会被强行撑大模糊 - video 还需补
aspect-ratio: 16 / 9，防止全屏按钮触发后比例崩坏 - 不要用
object-fit: contain替代 —— 它只管“怎么塞进框”，不管“框本身是不是自适应”
真正难的不是写几行 CSS，而是意识到：自适应不是让页面“看起来填满”，而是让所有尺寸关系在任意视口下保持数学一致。根字号算错 1px、漏掉一个 height: auto、或者忘了 Safari 的静默兼容，都会让整屏比例偏移——这种偏移人眼不一定立刻察觉，但用户一放大、一横屏、一切换设备，问题就全暴露了。
