Html 媒体查询：检查最小高度和最小宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19837035/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Media Queries: check min-height and min-width?
提问by The.Prophecy
I am trying to change CSS on my page based on the min-height and min-width of the browser, so I am using this:
我正在尝试根据浏览器的 min-height 和 min-width 更改页面上的 CSS，所以我使用的是：
@media (min-height: 500px), (min-width: 580px) {
/* CSS stuff */
}
But for some reason, this doesn't work. I can check for min-height and max-width (or vice versa) or for max-height and max-width at the same time, but checking for both min values doesn't seem to work.
但由于某种原因，这行不通。我可以同时检查 min-height 和 max-width（反之亦然）或 max-height 和 max-width，但检查这两个最小值似乎不起作用。
I should specify this more: I want the browser to act if a min-height ora min-width becomes true. Using the and-operator will only work if both criteria are true.
我应该更多地说明这一点：我希望浏览器在 min-height或min-width 变为真时采取行动。仅当两个条件都为真时，使用 and 运算符才有效。
Am I doing something wrong?
难道我做错了什么？
回答by Alexandra
Use andinstead of a comma, like this:
使用and逗号代替，如下所示：
@media (min-height: 500px) and (min-width: 580px) {
/* CSS stuff */
}
回答by Igor Cube
Use media query one inside other:
在其他中使用媒体查询：
@media screen and (min-height: 40px) {
@media screen and (min-width: 50px) {
/*enter css here to apply for both condition*/
}
}
回答by Rigel Networks
Have you added following meta tag in :
您是否在 中添加了以下元标记：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Here is REf : http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
这是参考：http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
After that use your media Query :
之后使用您的媒体查询：
@media (min-height: 500px) and (min-width: 580px) {
/* CSS stuff */
}
For media query details you can more info from http://stephen.io/mediaqueries/for all iOS devices. If you have any other query let me know. Even you can get better idea from here http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
有关媒体查询详细信息，您可以从http://stephen.io/mediaqueries/获取所有 iOS 设备的更多信息。如果您有任何其他查询，请告诉我。即使你可以从这里得到更好的想法http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
