可用css变量定义宽高比，如--aspect-w: 16; --aspect-h: 9;再用aspect-ratio: calc(var(--aspect-w) / var(--aspect-h));但仅chrome 103+、firefox 110+、safari 16.4+支持；旧版需@supports包裹并降级padding-top方案。
如何用 CSS 变量定义宽高比并复用
直接用 --ratio-w 和 --ratio-h 两个变量控制比例，比硬写 aspect-ratio: 16 / 9 更易维护。尤其当项目里有封面图（21:9）、头像（1:1）、卡片图（4:3）多种比例时，改一处变量就能全局生效。
常见错误现象：aspect-ratio: calc(var(--ratio-w) / var(--ratio-h)) 在 Safari ≤15.4 中会解析失败——它不支持 calc() 用于 aspect-ratio。必须用分数形式，如 aspect-ratio: 21 / 9。
- 变量定义推荐写在组件作用域内（如
.product-card__placeholder），而非:root，避免跨模块冲突 - SCSS 中可用
@function ratio-percent($w, $h) { @return percentage($h / $w); }预计算padding-top值，再通过#{ratio-percent(16, 9)}注入 - 若需动态注入（如 SSR 渲染时由后端传参），用
style="--ratio-w: 4; --ratio-h: 3;"，CSS 层保持aspect-ratio: var(--ratio-w) / var(--ratio-h)
如何用 @media + CSS 变量切换不同断点下的占位比例
竖屏手机常需 4:5，横屏或桌面则切回 16:9；用媒体查询改变量值，比写多套 class 更干净。关键不是覆盖整个样式块，而是只动比例变量。
容易踩的坑：在 @media (orientation: landscape) 里改 --ratio-w，但没加 @supports (aspect-ratio: 1) 包裹——旧版 Safari 会把新变量值也应用到 fallback 方案上，导致 padding-top 计算错乱。
- 正确做法是：先用
@supports (aspect-ratio: 1)包裹现代方案，再在外层用@media控制变量；fallback 方案（padding-top）单独写，不依赖变量 - 不要在同一个媒体查询里同时改
--ratio-w和--ratio-h再配padding-top: calc(...)—— CSS 不支持在calc()里做除法运算，padding-top: calc(var(--ratio-h) / var(--ratio-w) * 100%)无效 - 移动端优先时，默认变量设为 4/5，桌面端用
@media (min-width: 768px)覆盖为 16/9
为什么不能只靠 CSS 变量实现兼容性兜底
CSS 变量本身兼容性很好（Chrome 49+、Firefox 31+、Safari 9.1+），但它无法解决 aspect-ratio 在 Safari ≤15.4 中被完全忽略的问题。变量能控制“写什么”，但不能让浏览器执行不支持的属性。
典型错误：只写 .placeholder { --ratio: 16/9; aspect-ratio: var(--ratio); width: 100%; }，然后以为老 Safari 会自动降级——结果占位区域高度为 0，后续内容塌陷上移。
- 必须搭配
@supports (aspect-ratio: 1)判断，把现代写法包在里面；不支持时，用传统padding-top+position: absolute方案 -
padding-top的百分比值不能靠变量动态计算（因老 Safari 不支持calc()里的变量），得预编译或服务端注入具体数值，如padding-top: 56.25% - 如果项目已用 CSS 变量管理主题色、字号等，别把占位逻辑混进去——比例是布局约束，不是视觉变量，应隔离在
layout或aspect命名空间下，例如--aspect-w、--aspect-h
如何让变量驱动的占位符在 flex/grid 容器中稳定缩放
flex 或 grid 容器本身不提供宽高比约束，aspect-ratio 必须作用于子容器（即占位符包裹层），而非直接设在 img 上。变量在这里的作用是统一配置该包裹层的比例，而不是控制图片自身。
容易被忽略的一点：当父容器是 display: flex 且未设 align-items: center 时，aspect-ratio 容器可能被拉伸（stretch 默认行为），导致高度异常；而变量改了比例，却看不出效果——问题不在变量，而在 flex 对齐方式。
- 占位符容器必须设
width: 100%或max-width，否则aspect-ratio在弹性上下文中无基准可依 - 若父容器是
grid，确保该占位符项未设grid-row-start/end等固定位置，否则aspect-ratio会被 grid 轨道尺寸覆盖 - 对 SVG 占位图，务必加
height: auto；对<img>，补height: 100%并配合object-fit，否则变量改了比例，图片仍可能拉伸或留白
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
