html - @media 查询未在我的响应式导航栏设计中运行？

问题描述

我被这个错误困住了，我尝试使用媒体查询制作的响应式导航栏根本没有响应，因为@medias 似乎无论我尝试什么都没有效果。我已经尝试了所有可能的媒体查询格式，但我得到的只是无响应；请帮我克服它。

<!DOCTYPE html>
<html>
    <head>
        <title>Product Page</title>
        <style>
            *{
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            }
            
            body{
                background-color: antiquewhite;
                font-family: 'Lato', sans-serif;
            }
            
            #wrapper{
                position: relative;
            }
            li{
                list-style: none;
                
            }
            
            
            a{
                color: #000;
                text-decoration: none;
            }
            
            header{
                width: 10s0vw;
                position: fixed;
                top: 0;
                min-height: 75px;
                
                display: flex;
                justify-content: space-around;
                align-items: center;
                background-color: aquamarine;
                
                @media screen and(max-width: 600px){
                    flex-wrap: wrap;
                }
                
            }
            
            .logo{
                border: 1px solid black;
                width: 60vw;
                @media screen and(max-width: 650px){
                    margin-top: 15px;
                    width: 100%;
                    posistion: relative;
                }
            }
            
            #header-img{
                border: 1px solid black;
                width: 100%;
                max-width: 80px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-left: 10px;
                @media screen and(max-width: 650px)
                {
                    margin: 0 auto;
                }
                
            }
            
            #nav-bar{
                border: 1px solid black;
                font-weight: 400;
                
                @media screen and(max-width: 650px) {
                    margin-top: 10px;
                    width: 100%;
                    padding: 0 50px;
                  
                    li{
                        padding-bottom: 0px;
                    }
                }
                
                            
            }
            
            ul{
                border: 1px solid black;
                width: 35vw;
                display: flex;
                justify-content: space-around;
                
                @media screen and(max-width: 650px){
                    flex-direction: column;
                }
                
                
            }
        </style>
    </head>
    
    <body>
        <div id="wrapper">
            <header id="header">
                <div class="logo">
                    <img src="http://www.pngmart.com/files/1/Civil-Engineering-Book-PNG.png" id="header-img" alt="logo of library club">
                </div>    
                
                <nav id="nav-bar">
                    <ul>
                        <li class="nav-link"><a href="#">Features</a></li>
                        <li class="nav-link"><a href="#">Our Partners</a></li>
                        <li class="nav-link"><a href="#">Pricing</a></li>
                    </ul>
                </nav>
            </header>
        </div>
    </body>
</html>

标签： htmlcssresponsive-designmedia-queries

看起来您正在尝试使用标准 CSS 中常见的 SASS/LESS 或 CSS-in-JS 功能。

当您使用标准 CSS 时，您的媒体查询必须位于顶层并包含由选择器和定义组成的有效 CSS 块。

你可以在这里阅读更多https://developer.mozilla.org/en-US/docs/Web/CSS/@media

@media (max-width: 300px) {
  #navbar {
     color: pink; /* valid */
  }
}

#navbar {
  @media (max-width: 300px) {
     color: pink; /* invalid, media nested inside a selector */
  }
}

你也可以用 linters 来测试你的 CSS，一个在线的例子是http://csslint.net

html - @media 查询未在我的响应式导航栏设计中运行？

问题描述

解决方案

推荐阅读