Question

我想创建一个响应html和CSS3的导航栏。我使用媒体查询进行显示，或者没有用于切换菜单的链接栏（显示开/关）。

此代码运行正常但我想更改每个链接一行中的显示链接菜单（或最多2个）。但是我的代码中的所有更改都显示在同一行中的所有链接。

对于大屏幕，我的菜单在1行，对于较小的屏幕，菜单切换并在每个链接显示1行（或最多2个）。

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

您能否帮我理解为什么媒体查询不会为我的链接更改我的显示引擎。

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

您最初开始通过以下方式选择lis：

#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%;
}

导航栏中的显示块响应CSS3和媒体查询

1 个答案: