web-dev-qa-db-ja.com

min-heightのメディアクエリ

画面の解像度に基づいてメディアクエリを記述したいと思います。私の画面解像度の高さは768です。このためのメディアクエリを次のように記述しました。

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

上記のメディアクエリが機能していません。以前にmargin-topが設定されていません。ブラウザの高さではなく、画面の解像度に基づいてメディアクエリを記述しました。

htmlcssmedia-queries
6
user3386779

使用する：

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

[〜＃〜]注[〜＃〜]：常に最大値を使用します-効果的な幅のメディアクエリ

7
Aditya Male

問題は、ビューポートが画面のフル解像度ではないことです。

Min-heightを720pxなどの低い値に設定すると、機能するはずです。

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

 }
2
Judd Franklin

@ media only screen and（max-width：375px）and（max-height：667px）{}

1
Rohaan Gulzarvi

これを試してください：

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

このように定義できます。

@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
}
0
CodeMonkey
//simple max-width query
@media screen and ( min-height: 600px ){
    background: blue;
    ....
}

これは役立つかもしれません。

0
RRajani