Медиа-запросы не работают, несмотря на простое использование - PullRequest
Новая
       4

Медиа-запросы не работают, несмотря на простое использование

0 голосов
/ 14 января 2020

У меня очень простой медиа-запрос. Тем не менее, это не работает. Вот код: 

<!DOCTYPE html>

<html>

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

  <style>
    #landscape-div {
      display: none;
    }

    @media (min-width: 800px) {
      #landscape-div {
        display: block;
      }
    }
    
  
  </style>
</head>

<body>
  <div id="landscape-div">fsfsfsfsfsdd</div>
</body>

</html>

Ожидаемый результат: div должен отображаться только тогда, когда минимальная ширина превышает 800px.

Однако он отображается постоянно , Почему это происходит?

Редактировать: Изменить код в соответствии с предложениями. Все еще не работает.

Ответы [ 2 ]

2 голосов
/ 14 января 2020

Вы ссылаетесь на id, используя . в своем CSS. Тем не менее, это будет работать только для классов. Чтобы сослаться на id, вам нужно вместо этого использовать символ #.

Редактировать: это была опечатка в исходном вопросе, и теперь она исправлена.

Медиа-запрос должен прийти первым, чтобы убедиться, что другой оператор не переопределяет его, потому что операторы, которые приходят позже в документе CSS, будут выбраны браузером как наиболее важные. 

<!DOCTYPE html>

<html>

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

  <style>

    #landscape-div {
      display: none;
    }

    @media (min-width: 800px) {
      #landscape-div {
        display: block;
      }
    }
    
  </style>
</head>

<body>
  <div id="landscape-div">fsfsfsfsfsdd</div>
</body>

</html>

Просмотрите приведенный выше фрагмент кода в полноэкранном режиме (нажав «развернуть фрагмент»), чтобы убедиться, что он работает.

0 голосов
/ 14 января 2020

Ваш медиа-запрос был переопределен. Лучше всего писать медиазапросы в конце всех стилей

Обновите ваши стили, как показано ниже: 

#landscape-div {
  display: none;
}

@media (min-width: 800px) {
  #landscape-div {
    display: block;
  }
}
...