無法使用媒體查詢使導航欄響應

Question

當我嘗試將它們按不同的順序排列時，它似乎會改變，其中有什么特定的順序嗎？ 這是我的一些媒體查詢代碼：

    @media only screen and (min-width:700px){
        header{
            height: 8rem;  
        }

        .nav-brand{
            width: 3.5rem;
        }

        .nav-list{
            width: initial;
            height: initial;
            background-color: transparent;
            position: initial;
            top: initial;
            right: initial;
            flex-direction: row;
            transition: initial;
        }

        .menu-icons{
            display: none;
        }

        .nav-item{
            margin: 0 2.5rem;
        }

        .nav-link{
            color: #000000;
            position: relative;
            font-size: 1.3rem;
        }
}

Answer 1

只是導航欄沒有響應媒體查詢，還是整個網站？

我忘記輸入一次或兩次視口元標記。 因為它通常由我使用的框架和 CMS 平台處理。 所以這可能值得檢查。 :-)

<meta name="viewport" content="width=device-width, initial-scale=1">

查看 MDN web 文檔； https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

或 CSS 技巧； https://css-tricks.com/snippets/html/responsive-meta-tag/