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