横向模式下的移动媒体查询？

Question

我的移动媒体查询在横向模式下无效，也许我没有正确显示media only screen。我没有使用任何框架，只是常规的CSS ......

有人能指出我正确的方向吗？提前致谢

这就是我现在所拥有的

@media (min-width : 319px) and (max-width: 480px){
    //css here
}

不确定我做错了什么

Answer 1

CSS中有一个名为orientation的有用属性/函数，它有两个选项：

1. 风景
2. 肖像

这就是你如何使用它：

@media screen and (orientation:landscape) {
   /* Your CSS Here*/
}

要附加屏幕最大和最小宽度，您可以执行以下操作：

@media screen and (orientation:landscape)
and (min-device-width: 319px) 
and (max-device-width: 480px) {
   /* Your CSS Here*/
}

请参阅此参考：css expanding based on portrait or landscape screen size?以及有关此页面上@media查询的文档：https://css-tricks.com/snippets/css/media-queries-for-standard-devices

我希望这会对你有所帮助： - ）

Answer 2

媒体查询+视口高度的组合怎么样？

video {
    width: 100%;
}
@media screen and (orientation:landscape) {
   video {
      height: calc(100vh - 110px);
   }
}

100vh =视口高度的100％。

110px是导航栏的高度，（只需根据您的尺寸调整）