Адаптивный дизайн и сетки: куда мне поместить навигационную панель?

Question

Я строю небольшой блог на основе metalsmith и PureCSS фреймворка, который имеет простой макет из трех строк, например:

<div class="pure-g">
    <div class="pure-u-1"> Navbar </div>
    <div class="pure-u-1"> Content </div>
    <div class="pure-u-1"> Footer </div>
</div>

Поскольку я все еще изучаю много новогоВещи о CSS и адаптивном дизайне. Мне интересно, нужно ли также помещать панель навигации в строку сетки или она должна располагаться вне ее. Документация PureCSS гласит следующее:

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

Это сделало бы его yes , так как навигационное меню, конечно, видно пользователю. Но разве это не усложняет обработку медиа-запросов для панели навигации? Так куда же мне поместить панель навигации при использовании адаптивных сеток?

Answer 1

Нет. Навбар не обязательно должен быть в сетке. Основная цель использования сеток - сделать контент лучше и правильнее. Это также помогает программисту решить, сколько блоков сетки следует выделить определенному элементу.

Однако, поскольку Navbar проходит весь путь по странице, нет причин назначать ему размер сетки. Оно всегда должно быть 100%.

Если вы создаете приложение для блога, то только ваш контент должен быть в вашей сетке, чтобы правильно отображать элементы. Из того, что я видел, нижний колонтитул также обычно простирается через окно.

Answer 2

Вы можете использовать сетку. Управление и обработка содержимого и компонентов будет проще, а рендеринг в разных браузерах будет более стабильным.