仅使用 CSS 重构响应式设计中的部分

Question

您将如何在移动版和桌面版布局中完全重构网页的各个部分？ 我想实现类似于以下的布局：

Desktop:
--------
Primary         |   Complementary 1
                |   Complementary 2
Secondary       |

Mobile:
-------
Complementary 1
Primary
Complementary 2
Secondary

注意：Desktop 中的分隔线应该是一条直线，Complementaries 具有固定宽度，最大宽度，Primary/Secondary 填充页面的其余部分。此外，所有部分的高度都不同。还要注意移动设备中的交错顺序。 所有这些都阻止了我使用简单的 flexbox 方法，使用 order 和 row/column 来实现这一点。

他们的看法是：桌面中清晰的水平分隔只有通过将两列都放在一个 div 中才真正可行 - 但这本质上会阻止移动布局。 如果有办法通过 css 完全忽略包装 div，那可能是可能的，但我从来没有想过。

感谢任何想法 - 使用 Javascript 这当然是可能的，但如果有一个聪明的、或多或少纯 CSS 的解决方案，我会非常喜欢。

Answer 1

如上面的 cmets 所述，这可以相对容易地实现，使用 CSS 声明 display: grid 并将其设置为所需大小的媒体查询。

如果您首先以您希望将内容显示为单列的方式构造内容（即Complementary 1、Primary、...），那么您可以简单地使用min-width 创建一个媒体查询（无论您希望最小宽度为），然后使用网格相应地设置内容。例如：

/* Set grid layout for screens larger than 700px only */
@media (min-width: 700px) {
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 2em;
  }
  
  /* place sections into relevant columns/rows */
  .grid main {
    grid-column-start: 1;
    grid-row-start: 1;
  }
  
  .grid section {
    grid-column-start: 1;
    grid-row-start: 3;
  }
  
  .grid aside {
    grid-column-start: 2;
    grid-row-start: 1;
  }
  
  .grid main + aside {
    grid-column-start: 2;
    grid-row-start: 2;
  }
  
  /* Add a rule between the aside and the main content */
  aside {
    padding-left: 2em;
    border-left: 1px solid #aaa;
  }
}

<section class="grid">
  <aside>
    <p>Complementary 1</p>
  </aside>
  
  <main>
    <h1>Main content</h1>
    <p>Your main content can go here...</p>
  </main>
  
  <aside>
    <p>Complementary 2</p>
  </aside>
  
  <section>
    <h1>Secondary content</h1>
    <p>Your secondary content can go here...</p>
  </section>
</section>

需要注意的一点是，在上面的示例中，您的“次要内容”似乎开始于“补充”内容的下方。我不确定这是否只是格式错误 - 如果这不是故意的，您可以适当调整 grid-row-start。

编辑：

您可以使用display: contain 使列与大小无关，但请注意 - 支持此功能的是pretty terrible！如果可访问性不是特别关注的问题，这就足够了。

如果可访问性是一个问题，您可以使用 JavaScript 相对轻松地实现以下目标，只需将 main 和 section 元素包装在一个 div 中，将 asides 包装在另一个 div 中取决于屏幕尺寸。这将解决对display: contain 的不良支持，这只会使有问题的元素成为invisible 无论如何（因此使用JavaScript 删除包装<div> 将有效地执行与将其设置为display: contain 相同的事情）。

希望这能给你一个前进的方向。

.grid {
  display: flex;
  flex-wrap: wrap;
}

.grid > div {
  display: contents;
}

.grid aside {
  order: 1;
}

.grid aside + aside {
  order: 3;
}

.grid main {
  order: 2;
}

.grid section {
  order: 4;
}

.grid main,
.grid section,
.grid aside {
  width: 100%;
}

/* Set grid layout for screens larger than 700px only */
@media (min-width: 700px) {
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 2em;
  }
  
  .grid > div {
    display: block;
  }
  
  /* Add a rule between the aside and the main content */
  .grid > div + div {
    padding-left: 2em;
    border-left: 1px solid #aaa;
  }
  
  /* Set order back to 0 */
  .grid section,
  .grid main,
  .grid aside {
    order: unset;
  }
}

<section class="grid">
  <div>
    <main>
      <h1>Main content</h1>
      <p>Your main content can go here...</p>
    </main>

    <section>
      <h1>Secondary content</h1>
      <p>Your secondary content can go here...</p>
    </section>
  </div>
  
  <div>
    <aside>
      <p>Complementary 1</p>
      <p>Complementary 1</p>
      <p>Complementary 1</p>
      <p>Complementary 1</p>
      <p>Complementary 1</p>
      <p>Complementary 1</p>
    </aside>

    <aside>
      <p>Complementary 2</p>
    </aside>
  </div>
</section>