根据窗口宽高比重新排列元素：CSS可实现吗？需用JS吗？

可以通过CSS Grid结合宽高比媒体查询来实现你需要的响应式排列，具体实现方案如下：

核心思路 #

根据窗口宽高比（aspect-ratio）的不同，切换两种布局模式：

• 竖屏（宽高比 ≤ 1）：红色大元素占满整行，四个绿色小元素在下方自动排成两行两列
• 宽屏（宽高比 > 1）：红色大元素占满左侧整列，四个绿色小元素在右侧排成两行两列

代码示例 #

HTML结构 #

<div class="layout-container">
  <div class="large-element"></div>
  <div class="small-element"></div>
  <div class="small-element"></div>
  <div class="small-element"></div>
  <div class="small-element"></div>
</div>

CSS样式 #

/* 基础布局：竖屏状态 */
.layout-container {
  width: 100vw;
  height: 100vh;
  display: grid;
  gap: 12px; /* 元素间间距，可自定义 */
  padding: 12px;
  box-sizing: border-box;
  grid-template-columns: repeat(2, 1fr);
}

.large-element {
  background-color: #ff4444;
  grid-column: 1 / -1; /* 占满所有列 */
}

.small-element {
  background-color: #44dd44;
}

/* 宽屏状态：宽高比大于1时触发 */
@media (aspect-ratio > 1/1) {
  .layout-container {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(2, 1fr);
  }

  .large-element {
    grid-row: 1 / -1; /* 占满所有行 */
    grid-column: 1 / 2; /* 仅占第一列 */
  }
}

说明 #

• aspect-ratio媒体查询可精准监听窗口宽高比例变化，自动切换布局
• CSS Grid的行列模板能灵活控制元素占位，无需额外JavaScript逻辑
• 你可根据需求调整grid-template-columns的比例、gap间距以及元素的颜色、尺寸等属性

内容的提问来源于stack exchange，提问作者Mike Tsayper