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

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

1 个答案: