全高清(1920 像素)上的 CSS 媒体查询与其他媒体查询一样

Question

考虑以下代码:

header {
    height: 60px;
    background: red;

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

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

当我断开我的笔记本电脑(假设我重新启动它以重置屏幕设置)并打开网页时，我发现标题的背景现在是蓝色 - 意味着它响应 1650px 媒体查询

我的问题是 - 我的笔记本电脑的分辨率为 1920(未连接到屏幕)但对 1650 像素的媒体查询有响应，为什么会这样？我想看到网页就像当我的笔记本电脑连接到屏幕时一样，它是相同的分辨率。

谢谢

Answer 1

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