全高清（1920px）上的CSS媒体查询就像其他人一样

Question

请考虑以下代码：

header {
    height: 60px;
    background: red;

    @media (max-width: 1650px) {
        background: blue;
    }
}

我使用连接到全高清（1920 x 1080）分辨率屏幕/显示器的笔记本电脑 当我在连接屏幕的情况下查看网页时，标题背景为红色，因此它不响应1650px媒体查询。

当我断开笔记本电脑的连接时（让我说重新启动它以重置屏幕设置）然后打开网页我发现标题的背景是蓝色现在 - 表示它对1650px媒体查询的响应

我的问题是 - 我的笔记本电脑是1920分辨率（未连接到屏幕）但是对1650px媒体查询的响应，为什么会发生这种情况？我想看到网页就像我的笔记本电脑连接到屏幕一样，它的分辨率相同。

由于

Answer 1

因为在你的系统中是笔记本电脑屏幕的界面比例，它以编程方式使其在宽度为1400像素的地方，但图片继续在1920年呈现。

Answer 2

您的媒体查询无法在.header的样式内部，括号未正确关闭。

使用此功能：

header {
    height: 60px;
    background: red;
}

@media (max-width: 1650px) {
    header {
        background: blue;
    }
}