Question

我正在尝试使用一个菜单，当浏览器窗口变小时，它会缩小字体大小。这就是我所拥有的：

的CSS：

@media screen and (max-width : 1115px) {
    /*Make font on menu smaller*/
    nav a {
        font-size: smaller;
    }
}
    nav a {
        text-decoration: none;
        display: inline-block;
        border-bottom: 3px solid transparent;
        transition: 0.5s ease;
        white-space: nowrap;
        height: 20px;
        color: #171581;
        padding: 8px 8px 8px 8px;
        font-family: HelveticaNeue-Thin;
        font-weight: 100;
        font-size: medium;
    }

HTML

<nav>
    <label for="show-menu" class="show-menu"></label>
    <input type="checkbox" id="show-menu" role="button">
    <ul id="menu">
        <li><a href="#" class="top-menu" id="about">About</a></li>
        <li><a href="#" class="top-menu" id="residential">Residential &amp; Business</a></li>
        <li><a href="#" class="top-menu" id="myaccountdetails">My Accounts Details</a></li>
        <li><a href="#" class="top-menu faqs active" id="faq">FAQ</a></li>
        <li><a href="#" class="top-menu" id="contactus">Contact us</a></li>
    </ul>
</nav>

据我所知，我在论坛上看到的这个应该正在工作但是当我调整窗口大小时没有效果。

这个问题不完全相同。这篇文章是在问什么是错的，另一篇文章是在问这个问题。

Answer 1

始终在媒体查询后显示

font-size: medium;。只需重新订购样式：

nav a {
    text-decoration: none;
    display: inline-block;
    border-bottom: 3px solid transparent;
    transition: 0.5s ease;
    white-space: nowrap;
    height: 20px;
    color: #171581;
    padding: 8px 8px 8px 8px;
    font-family: HelveticaNeue-Thin;
    font-weight: 100;
    font-size: medium;
}

@media screen and (max-width : 1115px) {
    /*This is later in the order of styles, so will be applied when the screen is <= 1115px */
    nav a {
        font-size: smaller;
    }
}

https://jsfiddle.net/xo3cq44t/

无法使用@media更改字体大小

1 个答案: