CSS3媒体查询不起作用

时间:2013-05-24 17:30:47

标签: css3 screen media device

我有以下代码:

<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进行测试。

我做错了什么? 谢谢

1 个答案:

答案 0 :(得分:0)

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

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'