html - 带有 block 的响应式导航菜单

Question

我想知道如何完成this site有他们的导航 - 在大约 60em 处，它堆叠成 6 个 block ，文本居中，图标在顶部，我想完成同样的事情，当调整到大约 60em 时，我的导航中有 4 到 6 个 block 。

这是一个jsfiddle

感谢您的帮助

  <header class="header">

            <nav class="nav">
        <ul>
                <li>Home</li>
                <li>Home</li>
                <li>Home</li>
                <li>Home</li>
        </ul>
    </nav>


 </header>

CSS

nav {text-align: center;} 
nav ul li { display: inline-block;}

Answer 1

他们正在使用媒体查询。您已经熟悉这些了吗？

它们的断点在 60em。因此，在他们的样式表中，他们有媒体查询，在视口(viewport)小于 60em 的条件下，以不同方式设置相同元素的样式。例如，在带有 nav 类的标记中的 ul 具有此媒体查询条件和结果样式:

@media screen and (max-width: 60em)
header .nav {
width: 100%;
float: left;
}

即当视口(viewport)低于 60em 时，header 元素内具有类 nav 的任何 DOM 元素都将具有 100% 宽度和向左浮动。

编辑

如果您询问如何具体堆叠元素，您可以将它们 float 向左，当元素宽度超过容器的宽度时，它们将分解并下降到内部第一个 float 元素下方容器。所以，如果你有四个元素，你会想用类似的东西来设计它们的样式:

ul.nav li {
float:left;
width:50%;
}

如果这不起作用，请确保您的元素恰好是 50%。边距、边框、内边距都会影响元素的宽度，如果超过 50%，它们就会相互堆叠。如果出于某种原因将它们显示为 table，那么标记(HTML 文件)中的空格也会影响宽度。

我更新了你的 fiddle ，这样你就可以看到一个有效的例子:http://jsfiddle.net/QAEQ3/1/