媒体查询最小高度

use*_*779 5 html css media-queries

我想根据屏幕分辨率编写媒体查询。我的屏幕分辨率高度是768。为此我写了以下媒体查询:

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

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

小智 6

使用:

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

注意:始终使用最大宽度的媒体查询效果很好。

  • “注意:始终使用最大宽度媒体查询才能取得良好效果”您能解释一下原因吗? (8认同)

小智 1

请尝试这个:

@media only screen and (min-width: 768px) and (max-width: 850px) {
}
Run Code Online (Sandbox Code Playgroud)