css - 在导航栏中显示 block 响应式 CSS3 和媒体查询

Question

我想用 html 和 CSS3 创建一个响应式导航栏。我使用媒体查询来显示或不使用切换菜单(显示开/关)的链接栏。

此代码运行正确，但我想在每个链接一行(或最多 2 个)中更改显示链接菜单。但是我的代码中的所有更改总是在同一行中显示所有链接。

对于大屏幕，我的菜单在 1 行，对于小屏幕，菜单是切换的，每个链接显示 1 行(或最多 2 行)。

我在媒体查询中的显示 block 似乎没有运行。

你能帮我理解为什么媒体查询不会改变我的链接的显示引擎吗？

HTML代码

<nav id="navigation" class="clearfix">
    <ul class="clearfix">
        <li id="homeIcon"><a href=""></a></li>
        <li><a href="">link 1</a></li>
        <li><a href="">link 2</a></li>
        <li><a href="">link 3</a></li>
        <li><a href="">link 4</a></li>
        <li><a href="">link 5</a></li>
    </ul>
    <a href="#" id="pull">Menu</a>
</nav>

JSFiddle:JSFiddle

感谢您的支持

Answer 1

您最初是通过以下方式开始选择列表的:

#navigation li

但是当涉及到媒体查询时，您开始对您的选择更加笼统，例如:

@media only screen and (max-width : 320px){
nav li
{
    display: block;
    float: none;
    width: 100%;
}

因此，如果您检查该元素，您会看到#navigation li 覆盖了媒体查询。尝试将您的选择更改为:

@media only screen and (max-width : 320px)
{
#navigation li
{
    display: block;
    float: none;
    width: 100%;
}