如何让UI适配任意屏幕尺寸？居中图像及子元素适配求助

核心适配逻辑 #

以1920x1080为基准，通过视口高度的比例因子统一缩放所有UI元素，让图像和子元素联动适配不同屏幕高度，同时针对宽高比差异做微调，保证所有分辨率下的视觉效果和1080p一致。

CSS实现方案 #

1. 基础变量与容器设置 #

先定义基准尺寸变量，通过视口高度计算全局缩放因子，确保容器尺寸随屏幕高度等比变化：

:root {
  --base-height: 1080px;
  --base-width: 1920px;
  --scale-factor: calc(100vh / var(--base-height));
  --adapted-width: calc(var(--base-width) * var(--scale-factor));
}

.ui-container {
  position: relative;
  width: var(--adapted-width);
  height: 100vh;
  margin: 0 auto;
  transform-origin: center top;
  transform: scale(var(--scale-factor));
  overflow: hidden;
}

2. 核心图像适配 #

让图像铺满容器，在高分辨率（如2560x1440）下横向拉伸保持视觉完整性，同时居中显示：

.center-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

3. 子元素（按钮）联动缩放 #

按钮的位置、尺寸、字体全部基于基准值乘以缩放因子，确保和图像同步适配：

.ui-button {
  position: absolute;
  /* 基于1080p的基准坐标缩放 */
  top: calc(300px * var(--scale-factor));
  left: calc(50% - (120px * var(--scale-factor)));
  /* 基于1080p的基准尺寸缩放 */
  width: calc(240px * var(--scale-factor));
  height: calc(60px * var(--scale-factor));
  font-size: calc(18px * var(--scale-factor));
  padding: calc(10px * var(--scale-factor)) calc(20px * var(--scale-factor));
  background: white;
  border: none;
  border-radius: calc(8px * var(--scale-factor));
  cursor: pointer;
}

4. 非16:9屏幕适配 #

针对非16:9的分辨率，通过媒体查询调整容器尺寸，避免图像过度拉伸或压缩：

/* 屏幕宽高比小于16:9时，以宽度为基准适配 */
@media (aspect-ratio < 16/9) {
  .ui-container {
    width: 100vw;
    height: calc(100vw * 9 / 16);
    --scale-factor: calc((100vw * 9 / 16) / var(--base-height));
  }
}

可选：JavaScript动态适配（复杂场景） #

如果CSS变量的计算无法满足动态需求，用JS实时计算缩放因子并应用：

function adjustUIScale() {
  const baseHeight = 1080;
  const currentHeight = window.innerHeight;
  const scaleFactor = currentHeight / baseHeight;
  const container = document.querySelector('.ui-container');
  
  container.style.transform = `scale(${scaleFactor})`;
  container.style.width = `${1920 * scaleFactor}px`;
}

// 初始化和窗口 resize 时触发适配
window.addEventListener('load', adjustUIScale);
window.addEventListener('resize', adjustUIScale);

内容的提问来源于stack exchange，提问作者Çağan Kahraman