桌面上不同的标题布局答案

【问题标题】：Different header layout on desktop桌面上不同的标题布局
【发布时间】：2020-05-13 09:36:45
【问题描述】：

我正在尝试创建一个在桌面和移动设备上布局不同的标题，但我的知识使我陷入了死胡同。

我可以设计两种布局，但不知道如何在它们之间切换，因为这是 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>

主要区别在于导航链接位于桌面上的图像内。他们有足够的宽度可以将图像分开到所需的宽度，但是您不能在移动设备上执行此操作，因此移动解决方案将导航链接放在下面。问题是使用移动解决方案的桌面上的标题太高了。

最好的方法是什么？

【问题讨论】：

这可以使用媒体查询来完成。为什么不？标记可以相同。
如果导航在一个选项中的 div 中而在另一个选项中位于 div 之外，这是怎么回事？
不应该。标记还需要为您计划实现的目标做好准备。基本上两者的区别在于，在第二个示例中，导航链接应该显示为块。

标签： html css responsive

【解决方案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>

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

现在更新您的 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";
  }
}

【讨论】：