Css 媒体查询未按预期工作

我有下面的代码

@media only screen and (min-width : 320px) and (max-width : 500px) 

我不知道为什么这个规则只在480px之前有效，下面是我用来检测窗口大小的代码

jQuery(window).resize(function (){
  console.clear();
  console.log( jQuery(window).width() );
});

上面的jQuery只用于双重检查窗口

我有

---

这里的问题是规则只在480px之前有效，而不是应该在500px之前有效

将

@仅介质屏幕和（最小宽度：320px）和（最大宽度：500px）

替换为

@media all and (min-width : 320px) and (max-width : 500px) 

如果您使用

屏幕

，则它会根据屏幕大小工作

---

这可能也会考虑垂直滚动条，这是一个明显的问题，但始终值得检查-您是否有另一个媒体查询elesewhere可以覆盖此查询，例如

@media（最小宽度：480px）{}

。480px是

@media

查询中常见的最小宽度，因为我相信它是iPhone4的横向宽度？没问题，这也是我的第一个直觉。我正在使用一个现成的模板，因此应该有另一个混合的媒体查询。但是，检查控制台时，我的样式不会被覆盖，但实际上不会显示。例如，如果我将最大宽度从500更改为480，则规则在460处停止工作。有一个奇怪的20px，我找不到它的位置。