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

【问题标题】：Google chrome dev tools don't work as per my input valueGoogle chrome 开发工具无法按照我的输入值工作
【发布时间】：2021-08-04 13:39:41
【问题描述】：

这是关于 Google chrome 开发工具和 CSS 的问题。如下代码，虽然我在 VSCODE 的样式表上输入了“@media (max-width:1000px)”，但工具在 750px(75%) 处更改为响应式网页设计。我不缩放，并在 html 上写“视口”。比例也是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;
    }
}

【问题讨论】：

您确定要正确更改视口而不是缩放吗？ imgur.com/p4lprvq
感谢您的评论。在我得到那个之后，我再次确认了我的设置。然后，我找到了原因。原因是页面的缩放。我只是注意我的触摸板的缩放。抱歉问了这么一个基本问题。用日语，但我分享了我可以解决原因的链接。 atmarkit.co.jp/ait/articles/2003/11/news019.html

标签： css responsive-design google-chrome-devtools

【解决方案1】：

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

【讨论】：