css - 使用 css 媒体查询重新排列元素

Question

我是 CSS 的新手。我的网站上有一个标题栏，如下所示:

我正在使用媒体查询来调整它以适应窄显示。我已经将菜单栏压缩成一个下拉菜单并缩小了 Logo ，但我想重新排序元素，使它们看起来像这样:

我找不到实现此功能的方法 - 我需要将标题和菜单栏包含在一个 div 中，以便在第一个版本中将它们组合在一起，这意味着我无法按第二个版本中所示排列它们.

有没有一种div系统可以产生顶部布局和底部布局，只改变CSS而不改变HTML？

Answer 1

您可以使用 CSS 网格轻松解决这个问题。在下面的代码片段中，如果您按 Expand snippet，您将看到完整版本。

我不确定“缩小的菜单”是否应该像您的图形那样脱离网格，但如果不需要，您只需删除媒体查询的 width 属性即可。

.wrapper {
  display: grid;
  grid-template-columns: 100px 270px;
  grid-template-rows: 57px 32px;
  grid-gap: 12px;
  grid-template-areas: 
    "logo header"
    "logo menu";
}

.wrapper > div {
  outline: 4px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo {
  grid-area: logo;
}

.header {
  grid-area: header;
}

.menu {
  grid-area: menu;
}

@media (max-width: 700px) {
  .wrapper {
    grid-template-columns: 83px 213px;
    grid-template-rows: 57px 32px;
    grid-gap: 14px 9px;
    grid-template-areas: 
      "logo header"
      "menu .";
  }
  .menu {
    width: 100px;
  }
}

<div class="wrapper">
  <div class="logo">Logo</div>
  <div class="header">Page Title/header</div>
  <div class="menu">Menu Bar</div>
</div>