css - 媒体查询选择不同的 960 gs

Question

我使用下面的代码根据浏览器窗口的大小选择不同的 css 文件。但是，当我将窗口调整为该大小时，第一个似乎不起作用，即使我刷新页面也是如此。我不确定我应该做什么来解决这个问题。谢谢。

@import url("css/960.css") screen and (max-device-width: 1200px);
@import url("css/2520.css") screen and (max-device-width: 2560px);

Answer 1

在这里猜测一下，但我认为它不会起作用，因为您使用的是 max-device-width 而不是 max-width。

device-width 是设备能够显示的虚拟像素。

Device-width (Mozilla) - Describes the width of the output device (meaning the entire screen or page,
rather than just the rendering area, such as the document window).

我不认为您可以通过更改浏览器窗口的大小来伪造它。

另一方面，

max-width 是浏览器中显示的实际视口(viewport)的测量值。

Width (Mozilla) - The width media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).

所以你的选择要么尝试使用最大宽度:

@import url("css/960.css") screen and (max-width: 1200px);
@import url("css/2520.css") screen and (max-width: 2560px);

或尝试使用某种设备模拟器(例如 iPad 模拟器)或实际设备来测试您的媒体查询是否正常工作。