css - 媒体查询中的最小宽度如何计算？

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 */
}