Question

这是一个使用多个@media规则的简单HTML页面：

<!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>

随着窗口变小，此页面的颜色应更改。如果我手动调整Web浏览器窗口的大小，它将按预期工作。它也可以在Firefox下使用。但是，它无法在Chrome的自适应设计模式[版本69.0.3497.100（正式版本）（64位）]下正常运行

奇怪的是，当我在JSFiddle此处http://jsfiddle.net/7g5jca8x/13/

中重新创建CSS时，其行为在Chrome的响应式设计模式下符合预期。

JSFiddle版本和HTML版本之间有什么区别？我想不通。

Answer 1

您错过了viewport meta tag，这是一个示例

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

@media规则在Chrome响应式设计模式下的行为异常

1 个答案: