复杂的响应式布局

Question

我有一个复杂的布局设计，我想让它响应。问题是我不知道-

我应该如何处理这个设计（如何构建 html 来实现这个）
- 弹性？
- 网格?
- 绝对定位？
是否可以在不制作 2 套所有东西并为桌面隐藏其中一套的情况下制作这种布局，反之亦然？

这就是我所说的布局：

桌面布局

移动布局

我什至不需要此实现的代码部分。

我只需要知道这是否可行，如果可行我该怎么做（哪种结构，父级的显示类型等）如果没有，解决方法是什么？

改变设计是最后的手段，但我真的不想那样做。

Answer 1

将这三个元素作为兄弟元素，按照您希望它们在移动设备上显示的顺序排列。
将蓝色元素的背景与其内容分离（概念上）——它们不是一回事。
将黄色和蓝色（在桌面上透明）元素呈现为右列（使用 grid 或 flex），同时将蓝色背景放在它们下面（我使用父元素的 :before) 用于定位背景。
我特意在蓝色元素的内容上放置了一个内联红色边框，以突出其位置。
大功告成。其余是实现细节。

在查看下面的解决方案之前，我建议您自己动手做。

以下解决方案的要点：

请注意父级上所需的 position: relative 以及 “右列” 元素上的 position:relative; z-index: 0（如果没有这些规则，它们将被渲染:before).
我在这里使用了 min-heights 来调整元素的大小（因为它们是空的）但是，一旦你在其中放置了内容，你就 could/should 删除了 min-heights。
您可能需要调整 margins/paddings 以满足您的需要，一旦您将真实内容放入其中，但这应该是相当简单的。

这里是：

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.red {
  background-color: #ff8584;
  padding: 1rem;
}

.yellow {
  background-color: #fff742;
}

.green {
  background-color: #c0ff72;
}

.blue {
  background-color: #72ccff;
}

.red>* {
  min-height: 100px;
  margin-bottom: 1rem;
}

.red>*:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .red {
    position: relative;
    display: grid;
    grid-template: 'green yellow' auto 'green blue' 1fr / 1fr 1fr;
    min-height: 100vh;
    grid-column-gap: 1rem;
  }
  .red:before {
    content: '';
    position: absolute;
    background-color: #72ccff;
    top: 1rem;
    right: 1rem;
    bottom: 1rem;
    left: calc(50% + .5rem);
  }
  .red>* {
    margin-bottom: 0;
  }
  .yellow {
    margin: 1rem 1rem 0;
    grid-area: yellow;
  }
  .green {
    grid-area: green;
  }
  .blue {
    grid-area: blue;
  }
  .yellow,
  .blue {
    position: relative;
    z-index: 0;
  }
  .blue {
    background-color: transparent;
  }
}

<div class="red">
  <div class="yellow"></div>
  <div class="green"></div>
  <div class="blue" style="border: 1px solid red"></div>
</div>

我还写了一个SCSS version，使背景属性@mixins和$spacer成为一个变量，所以它们可以很容易地被替换。

Answer 2

我想你可以做的是：

在 HTML 代码中，元素的顺序为黄-绿-蓝，所有三个元素都是红色的兄弟姐妹和直接子元素。

对于移动版本，不需要 position 设置，不需要 flex 或任何东西，只有默认（= 全）宽度的常规 div，带有一些填充和边距。

对于桌面版，制作绿色和蓝色 inline-blocks，宽度略小于 50%，全部考虑到相应的填充和边距。将 position: relative 应用于红色，将 position: absolute 应用于黄色，它的宽度约为 45%（同样，取决于填充和边距）和 right 设置，将其放置在您想要的位置（作为百分比值）。黄色的 top 设置取决于红色和蓝色的 padding/margins。

Answer 3

尽管@tao 回答这个问题的答案更好，但我也想提供一个不太“专业”的答案，但效果很好。

我的回答使用了 grid-template-areas 和媒体查询。除此之外，我不会select我自己的答案作为公认的答案（即使这是我最后使用的）

https://codepen.io/absanthosh/pen/WNRqLYQ?editors=1100

复杂的响应式布局

Complex responsive layout

html

css

responsive-design