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

我试图有一个菜单，随着浏览器窗口变小字体大小减少。以下是我得到的：

Css:

HTML

就我在论坛上读到的内容而言，这应该是可行的，但当我调整窗口大小时，没有任何效果

---

这个问题不是完全重复的。这篇帖子问的是怎么回事，另一篇帖子问的是为什么会这样始终在媒体查询后显示时应用。只需重新排序您的样式：

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

nava{
文字装饰：无；
显示：内联块；
边框底部：3倍纯色透明；
过渡：0.5s缓解；
空白：nowrap；
高度：20px；
颜色：#171581；
填充：8px 8px 8px 8px；
字体系列：HelveticaNeue-Thin；
字号：100；
字号：中等；
}
@媒体屏幕和屏幕（最大宽度：1115px）{
/*这是以后的样式顺序，因此将在屏幕显示时应用。您是否尝试将@media块放在原始样式块之后？其父元素的字体大小是多少？是否已设置？这可能会影响您。请检查：显然是这样。谢谢您。作为对您的编辑的响应，重复的帖子回答了以下两个问题：这是错误的，为什么是这样。你的问题是完全重复的。但是如果你不同意，你可以在下面发表评论并投票重新打开。没有必要重新打开。问题现在已经回答了。只需按照页面上的说明编辑我的问题，并解释为什么如果我觉得它不是重复的，那么为什么它不是重复的，我就这样做了。而ot她的问题可能会得出相同的结论，我不认为这是重复的原因是，标题问了一些我在看的时候不会（没有）发现的问题。问为什么某件事是一种方式并不能帮助那些试图确定某件事出了什么问题的人。
<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>

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