如何根据浏览器窗口宽高比动态调整元素的height及bottom属性值

AI 小北

2026-9-25

实现方案

CSS没有提供直接获取窗口宽高比的专用函数，但可以通过以下两种成熟方案实现你要的bottom和高度随窗口宽高比动态调整的需求：

方案1：分段匹配（适合按固定比例阈值切换样式）

使用CSS媒体查询的aspect-ratio相关属性直接匹配窗口宽高比阈值，按需设置不同的样式值：

/* 示例：窗口宽高比 ≥ 16:9（超宽横屏）时的样式 */
@media (min-aspect-ratio: 16/9) {
  .loading-animation {
    bottom: 8vh;
    height: 12vh;
  }
}

/* 示例：窗口宽高比在 1:1 到 16:9 之间（普通横屏）时的样式 */
@media (max-aspect-ratio: 16/9) and (min-aspect-ratio: 1/1) {
  .loading-animation {
    bottom: 6vh;
    height: 14vh;
  }
}

/* 示例：窗口宽高比 ≤ 1:1（竖屏）时的样式 */
@media (max-aspect-ratio: 1/1) {
  .loading-animation {
    bottom: 5vw;
    height: 18vw;
  }
}

min-aspect-ratio和max-aspect-ratio的参数直接填你要匹配的宽高比例即可，比如9/16、21/9都支持。

方案2：连续动态计算（适合值随宽高比顺滑变化）

利用100vw等于窗口全宽、100vh等于窗口全高的特性，用calc()直接计算宽高比，代入你要的公式即可实现连续变化：

.loading-animation {
  /* 示例公式：bottom基础值为10px，宽高比每增加1，bottom增加5px，可按需调整系数 */
  bottom: calc(10px + (100vw / 100vh) * 5px);
  /* 示例公式：高度为窗口高度的12% 乘以 宽高比系数 */
  height: calc(12vh * (100vw / 100vh));
  /* 可选：用clamp限制值的范围，避免宽高比极端时样式异常 */
  /* bottom: clamp(5px, calc(10px + (100vw / 100vh) * 5px), 30px); */
}