Запросы @media не выполняются в моем адаптивном дизайне навигационной панели? - PullRequest
Новая
       5

Запросы @media не выполняются в моем адаптивном дизайне навигационной панели?

0 голосов
/ 22 декабря 2018

Я застрял с этой ошибкой, отзывчивая навигационная панель, которую я пытаюсь сделать, используя медиа-запросы, совсем не реагирует, поскольку @medias, кажется, не дает никакого эффекта, что бы я ни пытался.Я перепробовал все возможные форматы медиазапросов, но все, что я получил, - это безответственность;Пожалуйста, помогите мне преодолеть это.

Я застрял с этой ошибкой, отзывчивая навигационная панель, которую я пытаюсь сделать, используя медиа-запросы, совсем не реагирует, поскольку @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>

1 Ответ

0 голосов
/ 22 декабря 2018

похоже, что вы пытаетесь использовать функции, обычно встречающиеся в стандартном 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 */
  }
}

Вы также можете линтеры для проверки вашего CSS, один из примеров онлайн это http://csslint.net

...