css - 媒体查询不起作用

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查询限制