css - CSS3 媒体查询不起作用

Question

我有以下代码：

<link rel='stylesheet' media='only screen and (min-device-width : 1281px)' href='css/screenAllLarge.css' />
<link rel='stylesheet' media='only screen and (min-device-width : 800px) and (max-device-width : 1280px)' href='css/screenSmaller.css' />

它应该适用于 1281px 及以上的屏幕分辨率。但是当我重新调整屏幕大小时，它仍然应用相同的screenAllLarge.css CSS 文件，我也将其更改media='only screen'为media='screen但没有运气。我正在使用 Firefox 进行测试。

我究竟做错了什么？谢谢你

Answer 1

您必须涵盖两个不同的选项，正确设置间隔

media='only screen and (min-width: 1281px)' href='css/screenAllLarge.css' 
media='only screen and (min-width: 768px) and (max-width: 1280px)' href='css/screenAllSmall.css'