не работают @media при уменьшении окна браузера

Question

Есть сайт https://recode.monster , при уменьшении окна медиа-запросы не работают и верстка едет, но при этом в панели разработчика и на устройствах устройства все отлично работает. пробовал разные viewport, ничего не помогает

Answer 1

Без кода, можно предположить, что у Вас отсутствует:

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

Добавьте его между тегами <head></head> и проверьте.

Подробнее можно почитать тут

Answer 2

Потому что Ваши медиа-запросы некорректно написаны - вместо max-device-widthнадо писать просто max-width, иначе такой запрос только на девайсах и будет отрабатывать.

Вот пример с max-device-width - при простом уменьшении ширины экрана работать не будет:

div {
  height: 100px;
  border: 2px solid red;
  padding: 30px;
}

@media (max-device-width: 1200px) {
  div {
    height: 50px;
    border: 2px solid green;
    padding: 15px;
  }
}

<div>123</div>

А вот тот же пример, но с max-width - совсем другое дело:

div {
  height: 100px;
  border: 2px solid red;
  padding: 30px;
}

@media (max-width: 1200px) {
  div {
    height: 50px;
    border: 2px solid green;
    padding: 15px;
  }
}

<div>123</div>

БЛОГ НА HUSL

не работают @media при уменьшении окна браузера

Ответы (2 шт):