Как правильно сверстать отзывчиво шапку с разными отступами по краям страницы?

Question

[URart]

Доброго времени суток! Я в процессе обучения отзывчивого и адаптивного CSS. Беру макеты с фигма и пытаюсь сверстать. Суть вопроса в следующем, как правильно сверстать отзывчивую шапку с разными отступами от краев страницы?

ссылка на макет: https://www.figma.com/file/dTpEEtJiXjELGomz4zZ93a/...



P. S. Рандомный дизайн из джэм фигмы. Хотелось бы еще узнать мнение людей с опытом, это пример плохого дизайна?
P. P. S. Хочу научиться делать дизайн пиксель в пиксель или это не нужно? Буду рад любым мнениям и советам

Comments

[Letrider]

Здравствуйте, согласен с автором выше. В вашем случае необходимо учиться адаптивной верстке.

Answer 1

[Sozdavan]

Чтобы создать адаптивный заголовок с разными отступами от краев страницы, вы можете использовать CSS для установки ширины и полей элемента заголовка. Вот пример того, как вы можете это сделать:

<header>
  <h1>My website</h1>
</header>

header {
  width: 90%;
  margin: 0 5%;
}

В этом примере элемент заголовка имеет ширину 90% от ширины области просмотра и поля 0 сверху и снизу и 5% слева и справа. Это заставит заголовок занимать 90% ширины экрана с отступом в 5% с каждой стороны. Вы также можете использовать медиа-запросы для изменения стиля заголовка при разных размерах экрана, например:

@media (min-width: 768px) {
  header {
    width: 80%;
    margin: 0 10%;
  }
}

Это применит новые стили, когда ширина экрана будет не менее 768 пикселей. Вы также можете использовать CSS Grid или Flexbox, чтобы сделать адаптивный заголовок с разными полями

P.S. Если учитесь - главное пытаться и делать. Упорство и труд - всё перетрут. А дизайн на вид норм

Comments

[URart]

Не совсем понял, о чем вы. Дополняю свой вопрос картинкой



Допустим, я понимаю как центрировать шапку с помощью флексов, но не пойму, как разместить ее с разным расстоянием по краям...Вопрос заключался в том, как правильно сверстать отзывчивую шапку с разными отступами по краям страницы 143px слева и 150px справа на конкретном примере?

[Sozdavan]

URart, Чтобы создать адаптивный заголовок с разными полями по краям, вы можете использовать CSS Grid или Flexbox. Вот пример того, как вы можете использовать CSS Grid для создания заголовка с разными полями по краям:

<header>
  <h1>My website</h1>
</header>

header {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

h1 {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  justify-self: center;
  align-self: center;
  margin: 20px;
}

@media (min-width: 768px) {
  h1 {
    margin: 30px;
  }
}

В этом примере элемент заголовка получает свойство отображения сетки. Для свойств grid-template-columns и grid-template-rows установлено значение 1fr, поэтому заголовок будет занимать всю ширину и высоту своего родительского контейнера. Затем элемент h1 помещается в центр сетки с помощью свойств grid-column, grid-row, justify-self и align-self. Элемент h1 также имеет отступ в 20 пикселей.

Вы можете использовать медиа-запросы для изменения значений полей элемента h1 при разных размерах экрана, например:

@media (min-width: 768px) {
  h1 {
    margin: 30px;
  }
}

Это применит новые значения поля 30 пикселей, когда ширина экрана составляет не менее 768 пикселей. Вы также можете использовать Flexbox для создания заголовка с разными полями по краям. В этом случае вам нужно будет установить для свойства display заголовка значение flex и использовать свойства justify-content и align-items вместе со свойством margin, чтобы разместить заголовок там, где вы хотите

[URart]

Sozdavan, то есть вы предлагаете использовать значение margin-left: 143px; и margin-right: 150px; в конкретном примере??
Я думал о таком варианте, но мне показалось, что это не совсем правильный подход, возможно, какой-то примитивный, может, есть какой-то более оптимизированный и совершенный подход для данной задачи или я ошибаюсь?

[Sozdavan]

Использование фиксированных значений полей, таких как margin-left: 143px;и margin-right: 150px;, может быть не лучшим подходом для создания адаптивного заголовка с разными полями по краям. Это связано с тем, что эти значения не будут меняться при изменении размера или разрешения экрана и могут плохо выглядеть на экранах разных размеров.

Лучшим подходом было бы использование относительных единиц, таких как проценты, для полей. Это гарантирует, что поля заголовка будут пропорциональны размеру экрана и будут хорошо выглядеть на разных размерах экрана. Например, вы можете использовать margin-left: 5%;и margin-right: 10%;для создания заголовка с полями 5 % слева и 10 % справа.

Другой подход — использовать адаптивную структуру макета, такую ​​как Bootstrap, Foundation или Bulma, для создания адаптивного заголовка. Эти платформы предоставляют готовые адаптивные сетки и классы, которые можно использовать для создания адаптивного заголовка с различными полями по краям.

Вы также можете использовать CSS Grid или Flexbox для создания адаптивного заголовка с разными полями по краям. И у Grid, и у Flexbox есть свойства, которые позволяют размещать элементы относительно краев контейнера, например, justify-contentи align-contentво Flexbox и grid-columnи grid-rowв Grid.

Таким образом, хотя использование фиксированных значений полей может работать, это не самый оптимальный или совершенный подход. Вы можете использовать относительные единицы, такие как проценты или адаптивные рамки макета или CSS Grid и Flexbox, чтобы создать адаптивный заголовок с разными полями по краям.

Answer 2

[Сергей delphinpro]

У вас центрированная шапка. Это просто неаккуратность дизайнера.
И здесь важны не отступы от краев, а ширина.
Тое есть примерно так

.header {
  width: 990px; /*да, именно столько. Не нужно цепляться к пикселям! */
  margin: auto;
}

и всё.

Comments

[URart]

Спасибо большое!