媒体查询不起作用

Question

我正在尝试使用基于窗口大小的几个样式表（手机或只是非常小的桌面浏览器窗口）。这两者都不适用。也就是说，我只看到1024 + .css的风格有人可以帮帮我吗？

<!-- small display -->
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="resources/styles/small_device.css" />
<!-- widescreen -->
<link rel="stylesheet" type="text/css" href="resources/styles/1024+.css" />

谢谢

Answer 1

您的代码按预期工作 - 它在小屏幕上加载第一个样式表，始终加载1024+.css，以便每次都覆盖第一个样式表中的规则。

为更大的屏幕添加media查询限制