如何在媒體查詢中計算最小寬度？

我使用如何在媒體查詢中計算最小寬度？

@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或更寬，對吧？

來源

2012-11-10 dimitris

我看不出有什麼問題與您的媒體查詢，所以我們需要更多的信息來解決。我要添加的一件事是，如果您將另一個最小寬度與覆蓋481px的樣式相結合，則最大寬度是不必要的。 – kinakuta

我不知道其他信息，我可以給你，這就是它，這個風格的基本html頁面。 – dimitris

是否有可能實際查看某個地方的頁面？ – kinakuta

對我來說看起來很好。

這裏是被重建的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 */ 
}

來源

2012-11-12 02:56:42 justinavery

如何在媒體查詢中計算最小寬度？

回答

相關問題