时间戳

首页 > 解决方案 > 如何实现这种响应式布局

html - 如何实现这种响应式布局

问题描述

我有 3 个元素：A、B 和 C。

在手机上，我想要这个：

AA
AA
BB
BB
CC
CC

在桌面上，我想要这个：

AABB
AABB
CCBB
CCBB

我怎样才能做到这一点？

标签： htmlcssflexbox

解决方案

你已经标记了这个，但是你想要的布局是 2-d，所以你应该使用。

将下面示例中的类替换为媒体查询。

document.querySelector("button").addEventListener("click", () => document.body.classList.toggle("desktop"));
div {
  font-size: 20px;
  padding: 10px;
  text-align: center;
}

#a {
  background: red;
  color: white;
  grid-area: grid-a;
}

#b {
  background: green;
  color: black;
  grid-area: grid-b;
}

#c {
  background: black;
  color: white;
  grid-area: grid-c;
}

.desktop main {
  display: grid;
  grid-template-columns: auto-fit auto-fit;
  grid-template-rows: auto-fit auto-fit;
  grid-template-areas: "grid-a grid-b" "grid-c grid-b";
}
<main>
  <div id="a">A</div>
  <div id="b">B</div>
  <div id="c">C</div>
</main>

<button>toggle</button>

推荐阅读