Google chrome 开发工具无法按照我的输入值工作

Question

这是关于 Google chrome 开发工具和 CSS 的问题。如下代码，虽然我在 VSCODE 的样式 sheet 上输入了“@media (max-width:1000px)”，工具却变成了 750px(75%) 的响应式网页设计。我不缩放，并在 html 上写“viewport”。比例也是 1.0。请告诉我解决方案。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div></div>
    </body>
</html>

div {
    width: max(400px, 50%);
    height: 400px;
    background-color: coral;
}
@media (max-width: 1000px){
    div {
        background-color: blue;
    }
}

Answer 1

根据我的评论，原因是页面缩放。通过放回缩放，我可以解决问题。

Google chrome 开发工具无法按照我的输入值工作

Google chrome dev tools don't work as per my input value

css

google-chrome-devtools

responsive-design