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

Question

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

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

这就是我现在拥有的

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

不确定我做错了什么

Answer 1

CSS 中有一个很有用的 attribute/function，叫做 orientation，它有两个选项：

这是您可以使用它的方式：

@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? and also a documentation about the @media queries on this page: 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是我的导航栏的高度，（只需要适应你的尺寸）

Mobile media queries in landscape mode?