@qwekaqwe

Как правильно организовать не простую обёртку для сайта (container, wrapper)?

Как правильно организовать обёртку для адаптивного сайта (мобилный, планшет, десктоп. mobile first)?<header/main/footer class="*/*/*-main container"> не получится, так как в потоке есть блоки, которые должны тянуться на всю ширину экрана. 100vw не подходит из-за того, что в некоторых браузерах вертикальная прокрутка входит в часть вьюпорта, то есть появляется горизонтальная прокрутка.

Имеется примерно такая структура сайта:
<header>
  <section1></a>
  <section2></a>
  <section3></a>
</header>
<main>
  <div1></div>
  <div2></div>
  <div3></div>
  <div4></div>
  <div5></div>
  <div6></div>
</main>
<footer>
  <span1></span>
  <span2></span>
</footer>


Общая ширина мобильной версии 320px + отступы по 10px

Например, здесь, фоновое изображение задается на всю ширину (предположим section3)
5d361d66a5e43823821772.png

А здесь растягивается карта (предположим div6)
5d361d98a94c6474341370.png

Ну а если задавать отступы для обертки, то большинство блоков будет без отступа слева, что не очень хорошо при использовании БЭМ и переносе элемента в другое место
5d361df8696f4574492817.png

Будет ли хорошим тоном задавать ширину для блоков 320px, а отступы по 10px делать уже в самих блоках? Или же есть более лучшая реализация оберток для таких сайтов?

UPD!!!
Точнее вообще не задавать ширину блокам в header, main, footer.
body {
  min-width: 320px;
  margin: 0 auto;
  padding: 0;
}


в блоках указать паддинги по 20px
  • Вопрос задан
  • 360 просмотров
Пригласить эксперта
Ответы на вопрос 1
dom1n1k
@dom1n1k
Делать 2 вложенные обертки (полная ширина и с отступами) - нормальная практика.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы