css медиа-запросов, не показывающих никакого эффекта - PullRequest
Новая
       11

css медиа-запросов, не показывающих никакого эффекта

0 голосов
/ 03 мая 2020

это глупое сомнение, я гуглил, но не смог решить проблему.

медиа-запросы не работают, несмотря на правильные метатеги, когда я проверяю, индексируйте. html, я вижу строки ниже , это ошибка из-за пользовательской таблицы стилей 

  //in user stylesheet
 meta{
       display: none;
      }

// медиазапросы: 

 @media screen and(max-width: 1058px)
{

.navigation__list{
     width: 35%;
    } 
}
@media screen and(max-width: 768px) 
{

body{
    display: none;
    }
}

Вот мой: 

//Index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>    
    <nav class="navigation">
        <div class="navigation__logo">
            <h4>10X actions</h4>
        </div>
        <ul class="navigation__list">
            <li class="navigation__item"><a href="">Home</a></li>
            <li class="navigation__item"><a href="">About</a></li>
            <li class="navigation__item"><a href="">Contatc Us</a></li>
            <li class="navigation__item"><a href="">Enjoy</a></li>
        </ul>
        <div class="navigation__burger">
            <div class="navigation__burger--line">  
            </div>

            <div class="navigation__burger--line">
            </div>

            <div class="navigation__burger--line">    
            </div>
           </div>
    </nav>    
</body>
</html>

//style.css

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

.navigation{
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: #5d4954;
} 
.navigation__list{
    display: flex;
    justify-content: space-around;
    width: 30%;
}
.navigation__item{
    list-style: none; 
}

// игнорируем ниже линии Игнорируйте эти строки, так как мой вопрос не разрешен

1 Ответ

1 голос
/ 03 мая 2020

Я не уверен в этом. Но я думаю, что мой медиа-запрос тоже не работал, тогда я дал пробел между and и (. Итак, однажды попробуйте этот способ и дайте мне знать, если это сработало: 

// See space between
@media screen and (max-width: 1058px)
{
.navigation__list{
     width: 35%;
    } 
}

* Примечание: - Не забудьте принять ответ или, пожалуйста, оставьте комментарий, если это сработало или нет, чтобы этот пост мог помочь в ближайшие дни

...