Как правильно организовать обёртку для адаптивного сайта (мобилный, планшет, десктоп. 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)
А здесь растягивается карта (предположим div6)
Ну а если задавать отступы для обертки, то большинство блоков будет без отступа слева, что не очень хорошо при использовании БЭМ и переносе элемента в другое место
Будет ли хорошим тоном задавать ширину для блоков 320px, а отступы по 10px делать уже в самих блоках? Или же есть более лучшая реализация оберток для таких сайтов?
UPD!!!
Точнее вообще не задавать ширину блокам в header, main, footer.
body {
min-width: 320px;
margin: 0 auto;
padding: 0;
}
в блоках указать паддинги по 20px
