画面の解像度に基づいてメディアクエリを記述したいと思います。私の画面解像度の高さは768です。このためのメディアクエリを次のように記述しました。
@media(min-height:768px) and (max-height:850px) {
.video-contain{
margin-top:110px;
}
}
上記のメディアクエリが機能していません。以前にmargin-topが設定されていません。ブラウザの高さではなく、画面の解像度に基づいてメディアクエリを記述しました。
使用する:
@media screen and ( min-width: 850px ) and ( max-height: 768px )
{
.video-contain{
margin-top:110px;
}
}
[〜#〜]注[〜#〜]:常に最大値を使用します-効果的な幅のメディアクエリ
問題は、ビューポートが画面のフル解像度ではないことです。
Min-heightを720pxなどの低い値に設定すると、機能するはずです。
@media(min-height:720px) and (max-height:850px)
{
.video-contain{
margin-top:110px;
}
}
@ media only screen and(max-width:375px)and(max-height:667px){}
これを試してください:
@media only screen and (min-width: 768px) and (max-width: 850px) {
}
このように定義できます。
@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
}
//simple max-width query
@media screen and ( min-height: 600px ){
background: blue;
....
}
これは役立つかもしれません。