html - 响应式设计和网格 : Where should I put the navbar to?

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 文档说明如下:

All content which is visible to people needs to be contained inside a grid unit. This ensures that the content will be rendered properly.

这将使它成为是，因为导航菜单当然对用户可见。但是，这不会使导航栏的媒体查询处理变得更加复杂吗？那么，在使用响应式网格时，我应该将导航栏放在哪里？

Answer 1

没有。导航栏不一定在网格内。使用网格的主要目的是让内容看起来更好更合适。它还可以帮助程序员决定将多少个网格 block 分配给某个元素。

但是，由于导航栏贯穿整个页面，因此没有理由为其分配网格大小。它应该始终为 100%。

如果您正在构建博客应用程序，那么只有您的内容应该在您的网格系统中，以便正确呈现元素。据我所知，页脚通常也会一直延伸到整个窗口。