Html min-height 的媒体查询
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42407959/
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 query for min-height
提问by user3386779
I want to write media query based on screen resolution. My screen resolution height is 768. I wrote media query for this as:
我想根据屏幕分辨率编写媒体查询。我的屏幕分辨率高度是 768。我为此编写了媒体查询：
@media(min-height:768px) and (max-height:850px) {
.video-contain{
margin-top:110px;
}
}
My above media query is not working.margin-top is not set before. I wrote media query based for screen resolution but not browser height.
我上面的媒体查询不起作用。margin-top 之前没有设置。我根据屏幕分辨率而不是浏览器高度编写了媒体查询。
回答by Aditya Male
Use:
用：
@media screen and ( min-width: 850px ) and ( max-height: 768px )
{
.video-contain{
margin-top:110px;
}
}
NOTE: Always use max-width media queries to great effect.
注意：始终使用 max-width 媒体查询以达到最佳效果。
回答by Judd Franklin
It seems like the issue is that your viewport is not the full resolution of your screen.
问题似乎是您的视口不是屏幕的完整分辨率。
If you set the min-height to something lower, such as 720px, it ought to work.
如果您将最小高度设置为较低的值，例如 720 像素，它应该可以工作。
@media(min-height:720px) and (max-height:850px)
{
.video-contain{
margin-top:110px;
}
}
回答by Rohaan Gulzarvi
@media only screen and (max-width: 375px) and (max-height:667px) { }
@media only screen and (max-width: 375px) and (max-height:667px) { }
回答by RRajani
//simple max-width query
@media screen and ( min-height: 600px ){
background: blue;
....
}
This might help you.
这可能对你有帮助。
回答by Kashish Agarwal
Please try this:
请试试这个：
@media only screen and (min-width: 768px) and (max-width: 850px) {
}
回答by CodeMonkey
You can define as like this.
你可以这样定义。
@media screen and (max-width: 1600px) and (max-height: 900px){
//code here
}
@media screen and (max-width: 1600px) and (max-height: 1200px){
//code here
}
Or avoid mentioning width
或者避免提及宽度
@media screen and (max-height: 1200px){
//code here
}
