我正在使用
@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或更宽,对吧?
答案 0 :(得分:0)
对我来说很好看。
这是在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 */
}