各断点的扩展示例，包含更多实用场景和布局组合：

PC端 ≥769px

@media (min-width: 769px) {
  /* 场景1: 三栏布局-左侧导航 */
  .pc-3col-nav {
    flex: 0 0 18%;          /* 18%宽度 */
    padding-top: 40.5%;     /* 4.5:2 特殊比例 (2/4.5*18%) */
  }

  /* 场景2: 主内容区16:9视频区 */
  .pc-main-video {
    flex: 0 0 62%;          /* 62%宽度 */
    padding-top: 34.875%;   /* 16:9 (9/16*62%) */
  }

  /* 场景3: 右侧商品推荐1:1 */
  .pc-side-product {
    flex: 0 0 18%;          /* 18%宽度 */
    padding-top: 18%;       /* 1:1 (1/1*18%) */
  }

  /* 场景4: 横向广告横幅3:1 */
  .pc-wide-banner {
    flex: 0 0 100%;         /* 全宽 */
    padding-top: 33.33%;    /* 3:1 (1/3*100%) */
  }

  /* 场景5: 图文混排3:2比例 */
  .pc-3-2-article {
    flex: 0 0 48%;          /* 48%宽度 */
    padding-top: 32%;       /* 3:2 (2/3*48%) */
  }
}

平板端 481px-768px

@media (min-width: 481px) and (max-width: 768px) {
  /* 场景1: 双栏等宽布局 */
  .tablet-2col-equal {
    flex: 0 0 48%;          /* 48%宽度 */
    padding-top: 32%;       /* 3:2 (2/3*48%) */
  }

  /* 场景2: 特色商品卡片4:3 */
  .tablet-featured-product {
    flex: 0 0 31%;          /* 31%宽度 */
    padding-top: 23.25%;    /* 4:3 (3/4*31%) */
  }

  /* 场景3: 竖屏适配9:16 */
  .tablet-portrait-mode {
    flex: 0 0 70%;          /* 70%宽度 */
    padding-top: 124.44%;   /* 9:16 (16/9*70%) */
  }

  /* 场景4: 宽屏横幅广告5:2 */
  .tablet-wide-ad {
    flex: 0 0 100%;         /* 全宽 */
    padding-top: 40%;       /* 5:2 (2/5*100%) */
  }

  /* 场景5: 用户评论头像区 */
  .tablet-comment-avatar {
    flex: 0 0 15%;          /* 15%宽度 */
    padding-top: 15%;       /* 1:1 (1/1*15%) */
  }
}

手机竖屏 ≤480px

@media (max-width: 480px) {
  /* 场景1: 全屏启动图9:16 */
  .mobile-splash-screen {
    flex: 0 0 100%;         /* 全宽 */
    padding-top: 177.78%;   /* 9:16 (16/9*100%) */
  }

  /* 场景2: 双列商品展示 */
  .mobile-2col-products {
    flex: 0 0 48%;          /* 48%宽度 */
    padding-top: 64%;       /* 3:4 (4/3*48%) */
  }

  /* 场景3: 用户资料头图1.5:1 */
  .mobile-profile-header {
    flex: 0 0 100%;         /* 全宽 */
    padding-top: 66.66%;    /* 1.5:1 (1/1.5*100%) */
  }

  /* 场景4: 正方形图标导航 */
  .mobile-icon-nav {
    flex: 0 0 22%;          /* 22%宽度 */
    padding-top: 22%;       /* 1:1 (1/1*22%) */
  }

  /* 场景5: 长文配图3:1 */
  .mobile-long-article {
    flex: 0 0 100%;         /* 全宽 */
    padding-top: 33.33%;    /* 3:1 (1/3*100%) */
  }
}

手机横屏 ≤850px (landscape)

@media (max-width: 850px) and (orientation: landscape) {
  /* 场景1: 双栏视频列表 */
  .landscape-video-list {
    flex: 0 0 48%;          /* 48%宽度 */
    padding-top: 27%;       /* 16:9 (9/16*48%) */
  }

  /* 场景2: 宽屏仪表盘2.35:1 */
  .landscape-dashboard {
    flex: 0 0 100%;         /* 全宽 */
    padding-top: 42.55%;    /* 2.35:1 (1/2.35*100%) */
  }

  /* 场景3: 聊天列表头像 */
  .landscape-chat-avatar {
    flex: 0 0 15%;          /* 15%宽度 */
    padding-top: 15%;       /* 1:1 (1/1*15%) */
  }

  /* 场景4: 横向商品卡片3:4 */
  .landscape-product-card {
    flex: 0 0 30%;          /* 30%宽度 */
    padding-top: 40%;       /* 3:4 (4/3*30%) */
  }

  /* 场景5: 键盘上方输入区 */
  .landscape-input-area {
    flex: 0 0 100%;         /* 全宽 */
    padding-top: 25%;       /* 4:1 (1/4*100%) */
  }
}

计算验证工具

// 动态计算工具
function ratioCalc(flexBasis, ratio) {
  const [w, h] = ratio.split(':').map(Number)
  return {
    basis: `${flexBasis}%`,
    padding: `${((h/w)*flexBasis).toFixed(4)}%`
  }
}

// 示例：计算48%宽度3:4比例的padding-top
console.log(ratioCalc(48, '3:4')) 
// 输出：{ basis: "48%", padding: "64%" }

布局黄金法则

1. 复合比例策略
   在同一个容器中使用多种比例创建视觉节奏：

   .dynamic-layout {
     flex: 0 0 31%;
     padding-top: 
       calc(var(--base-padding) * var(--ratio-multiplier));
   }

2. 安全边距控制
   防止内容溢出：

   .safe-container {
     margin: 1%;
     box-shadow: 0 0 0 1px var(--color-border) inset;
   }

3. 响应式降级方案

   @supports not (aspect-ratio: 1/1) {
     .fallback-box::before {
       content: "";
       display: block;
       padding-top: 56.25%;
     }
   }

典型问题解决方案

通过增加更多场景示例，可以更全面地覆盖实际开发需求。建议配合CSS Grid进行混合布局，例如：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}