CSS3 - медиазапросы не работают (Google Chrome) - PullRequest
Новая
       6

CSS3 - медиазапросы не работают (Google Chrome)

0 голосов
/ 22 сентября 2018

Я пытался изменить цвет фона моей веб-страницы, если размер экрана меньше 400 пикселей.Тем не менее, медиа-запросы, похоже, не работают вообще.У меня есть этот метатег; 

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to- 
fit=no">

Ниже приведен медиа-запрос, который я пытаюсь выполнить. 

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

    body 
    {
        background-color: red;
    }

}

Я тоже пытался использовать "@media only screen",Кажется, это никак не влияет на программу.

Это минимальный, полный и проверяемый пример 

<html>

        <head>

            <!-- Responsive Meta Tag -->
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  

        </head>

        <body>

            {{'Hello'}}

        </body> 


 <style type="text/css">

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

body 
{
    background-color: red;
}

}
</style>

Спасибо зазаранее

1 Ответ

0 голосов
/ 22 сентября 2018

Запрос @media действителен и отлично работает .
Если он не работает в вашем приложении, это означает, что у вас есть более сильный CSS-селектор, переопределяющий селектор, используемый в @mediaзапрос.Как, например: 

body {
  background-color: white !important;
}

@media screen and (max-width: 400px) {
  body { 
    background-color: red; 
  }
}

@media запрос все еще работает, но правило !important имеет более высокую специфичность CSS и поэтому применяется к элементу.

Очень важное примечание : @media запросы не не увеличивают специфичность.Они просто говорят браузеру применять правило выборочно в зависимости от заданного условия.Но когда условие истинно, код внутри него обрабатывается так, как если бы он не был включен в условие.Так что это не имеет повышенной специфичности.

Примечание Другая распространенная причина для @media запросов, которые не применяются, заключается в том, что они проверяются в браузерах с уровнем масштабирования, установленным на значение, отличное от 100%.
Комусбросьте уровень масштабирования вашего браузера, используя Ctrl + 0

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

...