CSS Медиа-запросы не работают при изменении размера браузера - PullRequest
Новая
       23

CSS Медиа-запросы не работают при изменении размера браузера

0 голосов
/ 05 августа 2020

Я уже несколько дней провожу много исследований, чтобы выяснить, почему эта проблема сохраняется. Итак, начнем.

Я применил CSS медиа-запросы для смартфонов. Он отлично работает в симуляторе браузера и на самом смартфоне. Но мой клиент проверяет это иначе, он меняет размер браузера. К сожалению, медиазапросы CSS не применяются к браузеру, что нарушает всю компоновку.

Мой клиент настаивает на исправлении сбоев в изменении размера браузера, но если я это сделаю, макет смартфона будет нарушен.

Я уже добавил:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

И вот как я объявляю свои запросы: 

@media only screen and (max-width: 767px)
{
...
}

@media only screen and (max-width: 360px)
{
...
}

Теперь, чтобы исправить требование клиента, я добавили что-то вроде этого @media only screen and (max-device-width: 767px) специально для смартфонов.

Для меня это не эффективное исправление того, что происходит. Я просто хочу знать, где все go ошибочно и почему браузер не читает все мои CSS медиа-запросы. Надеюсь на ответ в ближайшее время.

1 Ответ

0 голосов
/ 05 августа 2020

У вас должна быть другая ошибка в CSS или HTML. Если я добавлю ваши медиа-запросы в обычный файл CSS, он будет использоваться браузером, если вы измените размер браузера.

См. Следующий фрагмент, чтобы увидеть, как цвет фона страницы изменяется в зависимости от ширины. 

body {
  background-color: blue;
}

@media only screen and (max-width: 767px) {
  body {
    background-color: green;
  }
}

@media only screen and (max-width: 360px) {
  body {
    background-color: pink;
  }
}
<p> TEST CONTENT </p>
...