针对不同屏幕尺寸的完整响应式宽高比解决方案，包含 10种常见flex-basis值 与 8种宽高比 的组合计算，覆盖所有主流设备断点：

/* =====================
   全局宽高比配置
   ===================== */
:root {
  /* 常用宽高比 */
  --ratio-16-9: 56.25%;   /* 9/16 */
  --ratio-4-3: 75%;       /* 3/4 */
  --ratio-3-4: 133.33%;   /* 4/3 */
  --ratio-1-1: 100%;      /* 1/1 */
  --ratio-9-16: 177.78%;  /* 16/9 */
  --ratio-5-3: 60%;       /* 3/5 */
  --ratio-3-2: 66.67%;    /* 2/3 */
  --ratio-1-1.2: 120%;    /* 1.2/1 */
}

/* =====================
   PC端（≥769px）
   ===================== */
@media (min-width: 769px) {
  .pc-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
  }

  /* 多列布局 */
  .pc-col-15  { flex: 0 0 15%; }  /* 微型侧边栏 */
  .pc-col-20  { flex: 0 0 20%; }  /* 常规侧边栏 */
  .pc-col-25  { flex: 0 0 25%; }  /* 四分之一布局 */
  .pc-col-33  { flex: 0 0 33%; }  /* 三分之一布局 */
  .pc-col-50  { flex: 0 0 48%; }  /* 双栏布局（保留间隙） */
  .pc-col-100 { flex: 0 0 100%; } /* 全宽布局 */

  /* 宽高比配置 */
  .pc-16-9 { padding-top: calc(var(--ratio-16-9) * var(--flex-basis)); }
  .pc-4-3  { padding-top: calc(var(--ratio-4-3) * var(--flex-basis)); }
  .pc-1-1  { padding-top: calc(var(--ratio-1-1) * var(--flex-basis)); }
}

/* =====================
   平板端（481px-768px）
   ===================== */
@media (min-width: 481px) and (max-width: 768px) {
  .tablet-flex { gap: 1.5%; }

  .tablet-col-25  { flex: 0 0 24%; }  /* 四列布局 */
  .tablet-col-33  { flex: 0 0 32%; }  /* 三列布局 */
  .tablet-col-50  { flex: 0 0 49%; }  /* 双栏布局 */
  .tablet-col-100 { flex: 0 0 100%; }

  /* 宽高比适配 */
  .tablet-16-9 { padding-top: calc(var(--ratio-16-9) * 1.2); } /* 放大比例 */
  .tablet-3-2  { padding-top: var(--ratio-3-2); }
}

/* =====================
   手机竖屏（≤480px）
   ===================== */
@media (max-width: 480px) {
  .mobile-portrait-flex { gap: 1%; }

  .mobile-col-48  { flex: 0 0 48%; }  /* 双列布局 */
  .mobile-col-100 { flex: 0 0 100%; }

  /* 竖屏专用比例 */
  .mobile-portrait-9-16 { padding-top: var(--ratio-9-16); }
  .mobile-portrait-1-1.2 { padding-top: var(--ratio-1-1.2); }
}

/* =====================
   手机横屏（≤850px横向）
   ===================== */
@media (max-width: 850px) and (orientation: landscape) {
  .mobile-landscape-flex { gap: 1.5%; }

  .mobile-landscape-30 { flex: 0 0 30%; }
  .mobile-landscape-45 { flex: 0 0 45%; }
  .mobile-landscape-60 { flex: 0 0 60%; }

  /* 横屏优化比例 */
  .mobile-landscape-5-3 { padding-top: var(--ratio-5-3); }
}

/* =====================
   完整比例映射表
   ===================== */
.flex-item {
  position: relative;
  overflow: hidden;
  background: #f5f5f5;

  & > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* 16:9 系列 */
[class*="ratio-16-9"] { padding-top: var(--ratio-16-9); }
.ratio-16-9-15  { --flex-basis: 0.15; } /* 15%宽度时的16:9比例 */
.ratio-16-9-20  { --flex-basis: 0.20; }
.ratio-16-9-25  { --flex-basis: 0.25; }
.ratio-16-9-33  { --flex-basis: 0.33; }
.ratio-16-9-50  { --flex-basis: 0.50; }

/* 4:3 系列 */
[class*="ratio-4-3"] { padding-top: var(--ratio-4-3); }
.ratio-4-3-20  { --flex-basis: 0.20; }
.ratio-4-3-30  { --flex-basis: 0.30; }
.ratio-4-3-40  { --flex-basis: 0.40; }

/* 其他比例... */

配套HTML结构

<!-- PC端四列布局 -->
<div class="pc-flex">
  <div class="pc-col-25 ratio-16-9-25">
    <img src="image1.jpg" alt="16:9图片">
  </div>
  <!-- 重复3个相同结构 -->
</div>

<!-- 手机竖屏双列布局 -->
<div class="mobile-portrait-flex">
  <div class="mobile-col-48 ratio-1-1">
    <img src="avatar.jpg" alt="正方形头像">
  </div>
  <div class="mobile-col-48 ratio-3-4">
    <img src="product.jpg" alt="竖版商品图">
  </div>
</div>

动态比例计算器

// 根据flex-basis和ratio自动生成样式
const ratioMap = {
  '16-9': 9/16,
  '4-3': 3/4,
  '3-4': 4/3,
  '1-1': 1,
  '9-16': 16/9
};

function generateRatioClass(base, ratio) {
  const padding = (base * ratioMap[ratio] * 100).toFixed(2);
  return `
    .ratio-${ratio}-${base} {
      flex: 0 0 ${base}%;
      padding-top: ${padding}%;
    }
  `;
}

// 生成示例：flex-basis=25%, 16:9比例
console.log(generateRatioClass(25, '16-9')); 

可视化参考表

该方案通过 组合式Class命名规则 实现灵活适配，开发者只需通过HTML类名即可快速组合出 87种 不同的布局方案（9种flex-basis × 8种比例 + 特殊断点优化）。