Media Query无法按预期工作

Question

我有以下代码。

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

我不知道为什么这个规则只能在480px之前工作，这是我用来检测窗口大小的以下代码。

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

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

我有<meta name="viewport" content="width=device-width, initial-scale=1"> 这里的问题是规则只能在480px而不是500px之前工作。

Answer 1

将@media only screen and (min-width : 320px) and (max-width : 500px)替换为

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

  

如果您使用screen，则根据屏幕尺寸进行操作。