如何在媒体查询中计算最小宽度？

Question

我正在使用

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

    #hello { background:red;}

}

和

@media only screen and (min-width:481px) and (max-width:600px) {

    #hello { background:green;}

}

我使用http://mattkersley.com/responsive/来测试我的网站，当我检查320x480时，媒体查询无效。

有什么想法吗？

我也使用此http://codebomber.com/jquery/resizer/并遇到同样的问题。

min-width：320px表示视口必须至少为320px或更宽，对吧？

Answer 1

对我来说很好看。

这是在CodePen上重新创建的 - http://codepen.io/justincavery/full/lbtBk

body {
  background-color: #fff;}
/* Style the body where there is no media queries available */    
@media (min-width:320px) and (max-width:480px){
  body {background-color: red;}
/* Style the body if the viewport is at least 320px or at most 480px */
}
@media (min-width:481px) and (max-width:600px){
  body {background-color: green;} 
/* Style the body if the viewport is at least 481px or at most 600px */
}
@media (min-width:601px){
  body {background-color: pink;} 
/* Style the body if the viewport is at least 601px */
}