1

我刚刚开始使用响应式布局，并且有一个与导航元素相关的特定问题。

如果我有这样的代码块：

<nav>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</nav>
<nav>
    <ul>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</nav>

在高分辨率计算机屏幕上查看时，我们会看到导航创建的 2x3 网格。即，每个导航将位于其自己的“行”上，并且每个导航的所有三个元素都将位于彼此的右侧或左侧。

在响应式布局中，如果窗口的大小显着缩小到 iPhone 分辨率，假设比例正确，导航元素是否会笨拙地改变，从而使视图看起来像：

<nav>
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
</nav>
<nav>
    <ul>
        <li>3</li>
    </ul>
</nav>
<nav>
    <ul>
        <li>4</li>
        <li>5</li>
    </ul>
</nav>
<nav>
    <ul>
        <li>6</li>
    </ul>
</nav>

我只是在寻找对这种新布局实践如何专门用于导航元素的高级理解。我希望为我正在制作的网站创建类似的东西，但如果发生这种情况，我想创建代码，这样我将拥有高分辨率的 2x3 矩阵和低分辨率的 3x2，移动到 6x1极小的分辨率。

如果是这种情况，有没有办法为特定的屏幕分辨率指定不同的 html？我知道我们可以为不同的分辨率指定特定的 CSS，但在这种情况下，我不确定更改 CSS 是否能满足我的需要。

4

1 回答 1

0

根据您的描述，我了解到您ul的 s 具有块显示，而lis 具有内联显示。这会导致 nav/ul 在其周围有一个矩形块，从而避免发生 2x3 布局。正如 Jrod 在评论中指出的那样，您真正想要的是将所有 li 项目包装起来的单个矩形块，并让浏览器排列它们。

您可以通过将所有 lis 放在一起来实现这一点，或者通过将 ul 和 nav 显示属性更改为内联来更好地实现这一点，同时在两个 nav 周围放置一个容器以确保它们最终按块分组。

div.container { display: block; }
nav, ul, li { display: inline; }

请注意，此解决方案还可能会创建一个包含两个空单元格的 4x2 网格，因此请确保将外部块限制为三个 lis 的宽度：

li { width: 150px; /* or whatever */ }
div.container { max-width: 450px; /* three lis at most */ }
于 2012-11-27T21:00:14.247 回答