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

【问题标题】：Mobile media queries in landscape mode?横向模式下的移动媒体查询？
【发布时间】：2016-10-29 22:47:20
【问题描述】：

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

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

这就是我现在拥有的

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

不知道我做错了什么

【问题讨论】：

【解决方案1】：

在 CSS 中有一个有用的属性/函数称为 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*/
}

希望对你有帮助:-)

【讨论】：

谢谢...关于 (min-width : 319px) 或 (max-width: 480px)，我怎么知道我的最小值和最大值是多少？
@Ris 你可以总结一下，就像你已经对最小和最大宽度所做的那样。有一个有用的文档，也许你想看看：css-tricks.com/snippets/css/media-queries-for-standard-devices :)

【解决方案2】：

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

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

100vh = 100% 的视口高度。

110px 是我的导航栏的高度，（只需要适应你的尺寸）

【讨论】：