Правило @media ведет себя странно в режиме адаптивного дизайна Chrome - PullRequest
Новая
       16

Правило @media ведет себя странно в режиме адаптивного дизайна Chrome

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

Вот простая HTML-страница, которая использует несколько правил @media: 

<!DOCTYPE html>
<html lang="en">
<html>
<head>
    <style type="text/css">
        .div1{
            height: 100vh;
            width: 100vw;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            background-color: blue;
        }
        @media only screen and (max-width: 700px) and (min-width: 500px) {
            .div1{
                background-color: green;
            }
        }
        @media only screen and (max-width: 499px) and (min-width: 300px) {
            .div1{
                background-color: red;
            }
        }
        @media only screen and (max-width: 299px)  {
            .div1{
                background-color: yellow;
            }
        }

    </style>
</head>
<body>
<div class="div1"></div>
</body>
</html>

Эта страница должна изменить свой цвет, когда окно станет меньше.Это работает как задумано, если я вручную изменяю размер окна веб-браузера.Это также работает под Firefox.Однако он не работает должным образом в режиме адаптивного дизайна Chrome [Версия 69.0.3497.100 (Официальная сборка) (64-разрядная версия)]

Как ни странно, CSS работает должным образом в режиме адаптивного дизайна Chrome, когда я его воссоздаюв JSFiddle здесь: http://jsfiddle.net/7g5jca8x/13/

В чем разница между версией JSFiddle и версией HTML?Я не могу понять это.

1 Ответ

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

Вы пропустили область просмотра meta tag вот пример 

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