html - 为什么导航元素不适用于@media 屏幕？

Question

我正在寻找解决方案；我发现其解决方案存在类似问题，但仍然无法正常工作。

当我运行它并检查它时，正文和着陆文本已更新好，但.nav-list没有。我尝试更改代码，更改 normal-screen 。nav-list……但是什么都没有。我还将与您分享一张图片，以便更好地清除它：

所以......这个想法是这个元素像列一样显示。有什么解决办法吗？谢谢！

.top-nav{
    width: 100%;
    height: 100vh;
    position: fixed;
    top: -100vh;
    z-index: 50;
    /*background-color: #9b4646; */
    border-bottom-right-radius: 100%;
    border-bottom-left-radius: 100%;
    transition: all 650ms cubic-bezier(1,0,0,1);
}

.nav-list{
    list-style: none;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 768px) {
    body {
        background: url(images/sitebg2.jpg) no-repeat center fixed;
        background-size: cover;
    }

    .landing-text h1{
        font-size: 15rem;
    }

    .landing-text h6{
        font-size: 1.7rem;
    }

    .nav-list{
        flex-direction: column;
    }
}

<header>
        <div class="menu-toggler">
            <div class="bar half start"></div>
            <div class="bar"></div>
            <div class="bar half end"></div>
        </div>

        <nav class="top-nav">
            <ul class="nav-list">
                <li>
                    <a href="index.html" class="nav-link"> Home </a>
                    <a href="#about" class="nav-link"> About </a>
                    <a href="#services" class="nav-link"> Services </a>
                    <a href="#portfolio" class="nav-link"> Portfolio </a>
                    <!--<a href="#experience" class="nav-link"> Experience </a> -->
                    <a href="#others" class="nav-link"> Other</a>
                    <a href="#contact" class="nav-link"> Contact </a>
                </li>

            </ul>

        </nav>
        <div class="my-logo">
            <h1>
                <!--<img src="images/my propio logotipo.jpg">-->
            </h1>
        </div>

    </header>

标签： htmlcssresponsive-designmedia-queriesnav