使用媒体查询创建响应式菜单：菜单无法缩放

Question

我正在尝试使用媒体查询使我的菜单在不同的分辨率下工作，但卡在某个地方。在 1025 和 1441（或更高）像素之间，字体大小必须根据屏幕进行相应更改，但事实并非如此。相反，我在减小浏览器大小时看到了这一点。

http://i.imgur.com/KasiLZw.png（我知道你们大多数人不喜欢图片，但我添加它以防万一）

这是我的代码：http://codepen.io/anon/pen/dPVzaW

HTML

<div id="cssmenu">
    <ul>
        <li class='active'><a href='/book/<?php echo $url; ?>'><span>Page details</span></a></li>
        <li><a href='/details/<?php echo $url; ?>'><span>Book details</span></a></li>
        <li><a href='/comments/<?php echo $url; ?>'><span>Comments</span></a></li>
        <li><a href='/suggestions/<?php echo $url; ?>'><span>Suggestions</span></a></li>
        <li><a href='/lists/<?php echo $url; ?>'><span>Lists</span></a></li>
        <li><a href='/inculture/<?php echo $url; ?>'><span>In culture</span></a></li>
        <li><a href='/cover-images/<?php echo $url; ?>'><span>Cover images</span></a></li>
    </ul>
</div>

CSS

#cssmenu {
    width: 55%;
}

#cssmenu ul {
    width: 100%;
    border-radius: 3px;
    padding: 0;
    list-style-type: none;
    position: relative;
    display: block;
    font-size: 0.8em;
    font-weight: bold;
    background-color: #6A5546;
    font-family: Arial, Helvetica, sans-serif;
    border-bottom: 1px solid #353535;
    zoom: 1;
}

#cssmenu ul:before {
    content: '';
    display: block;
}

#cssmenu ul:after {
    content: '';
    display: table;
    clear: both;
}

#cssmenu li {
    display: block;
    float: left;
    margin: 0;
    padding: 0 4px;
}

#cssmenu li a {
    display: block;
    float: left;
    color: #b4aaa2;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 20px 7px 10px;
    border-bottom: 3px solid transparent;
}

#cssmenu li a:hover {
    color: #FFFFFF;
    border-bottom: 3px solid #00b8fd;
}

#cssmenu li.active a {
    display: inline;
    border-bottom: 3px solid #00b8fd;
    float: left;
    margin-left: 1px;
}

@media screen and (min-width: 1025px) and (max-width: 1441px) {
    #cssmenu {
        width: 57%;
    }

    #cssmenu ul {
        width: 100%;
        border-radius: 3px;
        padding: 0;
        list-style-type: none;
        position: relative;
        display: block;
        font-size: 0.8em;
        font-weight: bold;
        background-color: #6A5546;
        font-family: Arial, Helvetica, sans-serif;
        border-bottom: 1px solid #353535;
        zoom: 1;
    }

    #cssmenu ul li a {
    }

}

Answer 1

您的问题与使用错误的 css 选择器指定字体大小有关。

UL 和 OL 的行为有些特殊，因为我认为默认情况下使用 LI 元素而不是 UL 的字体大小。

因此，如果您在 UL 上指定它，但默认情况下在 LI 上有一个尺寸，它不会进行任何更改。您应该在 LI 上指定。

像这样：

#cssmenu li {
    display: block;
    float: left;
    margin: 0;
    padding: 0 4px;
    font-size: 1em;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

@media screen and (min-width: 1025px) and (max-width: 1441px) {
    #cssmenu ul li {
      font-size: 0.8em;
    }
}

使用媒体查询创建响应式菜单：菜单无法缩放

Creating a responsive menu using media queries : Menu doesn't scale

css

media-queries

responsive-design