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

编程问答 2022-05-02

问题描述

这是关于 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;
    }
}

解决方法

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

google-chrome-devtoolsresponsive-design