桌面上的不同 header 布局

Question

我正在尝试创建一个 header，它在桌面和移动设备上的布局会有所不同，但我的知识让我有点 dead-end。

我可以设计两种布局，但不知道如何在它们之间切换，因为这是 HTML 的区别，而不是 CSS 所以我不能只使用媒体查询. 我正在尝试这样做：

第一个在桌面上。如您所见，导航链接位于图标 1 和 2 之间。选项二是移动设备，导航链接应位于图标 1、标题和图标 2 下。

桌面：

* {border: 1px solid black;}
header {
  display: flex;
  justify-content: center;
  border-bottom: 4px solid red;
}
div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
img {
   width: 10%;
}
li {
  display: inline-block;
}

<header>
  <img src="https://previews.123rf.com/images/aneheli/aneheli1501/aneheli150100030/35379090-artistic-sliced-lying-pineapple-on-orange-background-square-shot.jpg">
  <div>
    <h1>My Website.com</h1>
    <nav>
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
    </nav>
  </div>
  <img src="https://i.kym-cdn.com/photos/images/original/000/930/997/a0a.png">
</header>

手机：

* {border: 1px solid black;}
header {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 4px solid red;
}
div {
  display: flex;
  justify-content: center;
}
img {
   width: 10%;
}
li {
  display: inline-block;
}

<header>
  <div>
    <img src="https://previews.123rf.com/images/aneheli/aneheli1501/aneheli150100030/35379090-artistic-sliced-lying-pineapple-on-orange-background-square-shot.jpg">
    <h1>My Website.com</h1>
    <img src="https://i.kym-cdn.com/photos/images/original/000/930/997/a0a.png">
  </div>
  <nav>
    <ul>
      <li>Beep Boop</li>
      <li>Making the header</li>
      <li>Too long to fit inside</li>
    </ul>
  </nav>
</header>

主要区别在于导航链接位于桌面上的图像内。他们有足够的宽度可以根据需要将图像分开，但您不能在移动设备上这样做，因此移动解决方案将导航链接放在下面。问题是 header 在移动解决方案的桌面上太高了。

解决此问题的最佳方法是什么？

Answer 1

使用 CSS 网格来实现这一点。如果您不知道，这是一个很好的指南：https://css-tricks.com/snippets/css/complete-guide-grid/

基本上将您的 html 更新为这样的东西

<header>
  <img src="https://previews.123rf.com/images/aneheli/aneheli1501/aneheli150100030/35379090-artistic-sliced-lying-pineapple-on-orange-background-square-shot.jpg" class="img-left">
  <div class="title">
    <h1>My Website.com</h1>
  </div>
  <nav>
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
  </nav>
  <img src="https://i.kym-cdn.com/photos/images/original/000/930/997/a0a.png" class="img-right">
</header>

您在这里所做的是将所有元素直接放在 header 下。

现在更新您的 CSS，删除所有 flex-box 样式并包括 CSS 网格

header {
  justify-content: center;
  display: grid;
  grid-template-areas: 
              "img1 title img2"
              "img1 nav img2";
  border-bottom: 4px solid red;
}

.title {
  grid-area: title;
}

.img-left {
  grid-area: img1;
}

.img-right {
  grid-area: img2;
}

nav {
  grid-area: nav;
}

这里我们定义了一个网格并将所有元素应用于它。

我对你的CSS

做了一些额外的更新

img {
  max-width: 100%;
}

//Removed this
div {...}

最后，更新移动版网格模板

@media (max-width: 767px) {
  header {
    grid-template-areas:
              "img1 title img2"
              "nav nav nav";
  }
}

桌面上的不同 header 布局

Different header layout on desktop

html

css

responsive