最小高度的媒体查询答案

【问题标题】：media query for min-height最小高度的媒体查询
【发布时间】：2017-07-13 11:23:19
【问题描述】：

我想编写基于屏幕分辨率的媒体查询。我的屏幕分辨率高度是 768。我为此编写了媒体查询：

@media(min-height:768px) and (max-height:850px) {
   .video-contain{
     margin-top:110px;  
    }
}

我上面的媒体查询不工作。margin-top 之前没有设置。我编写了基于屏幕分辨率而不是浏览器高度的媒体查询。

【问题讨论】：

使用min-width 和max-width 代替高度。有效果吗？
你工作，但我有不同的高度（900px 和 1200px）宽度为 1600px
然后使用多个媒体查询。
您需要根据设置的上边距使用 javascript 或 jquery 来检查 window.height...媒体查询仅用于最小/最大宽度..它不适用于高度..跨度>

标签： html css media-queries

【解决方案1】：

请试试这个：

@media only screen and (min-width: 768px) and (max-width: 850px) {
}

【讨论】：

【解决方案2】：

你可以这样定义。

@media screen and (max-width: 1600px) and (max-height: 900px){
    //code here
}

@media screen and (max-width: 1600px) and (max-height: 1200px){
        //code here
}

或者避免提及宽度

@media screen and (max-height: 1200px){
            //code here
}

【讨论】：

【解决方案3】：

用途：

@media screen and ( min-width: 850px ) and ( max-height: 768px )
{
   .video-contain{
     margin-top:110px;  
    }
}

注意：总是使用最大宽度的媒体查询来获得很好的效果。

【讨论】：

“注意：总是使用最大宽度的媒体查询来获得很好的效果”你能解释一下为什么吗？
我不建议使用带有多个断点的 max-width 和 max-height，因为媒体查询中的大小是在逻辑布局像素中指定的，并且设备逻辑大小可以采用浮点数价值观。例如它可以是 768.5px，它会同时大于最大宽度和小于最小宽度，因此不会应用媒体查询。看看这里的例子：jsfiddle.net/lexkrstn/g2te9b89

【解决方案4】：

//simple max-width query
@media screen and ( min-height: 600px ){
    background: blue;
    ....
}

这可能会对你有所帮助。

【讨论】：

【解决方案5】：

问题似乎在于您的视口不是屏幕的完整分辨率。

如果您将最小高度设置为较低的值，例如 720px，它应该可以工作。

 @media(min-height:720px) and (max-height:850px)
{
   .video-contain{
     margin-top:110px;
    }

 }

【讨论】：

【解决方案6】：

@media only screen and (max-width: 375px) and (max-height:667px) { }

【讨论】：