Различный макет заголовка на рабочем столе

Question

Я пытаюсь создать заголовок, который будет по-разному выложен на настольных компьютерах и мобильных устройствах, но мои знания привели меня в тупик.

Я могу спроектировать оба макета, но не знаю, как мне переключаться между ними, так как это разница в 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>

Основное отличие состоит в том, что навигационные ссылки находятся внутри изображений на рабочем столе. У них достаточно ширины, чтобы вы могли sh разделить изображения настолько широко, насколько им нужно, но вы не можете сделать это на мобильном устройстве, поэтому мобильное решение помещает навигационные ссылки под ними. Проблема в том, что заголовок слишком высок на рабочем столе с мобильным решением.

Какой лучший способ go об этом?

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>

What you ' здесь все ваши элементы помещаются прямо под заголовок.

Теперь обновите ваш 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";
  }
}