横屏模式下的移动设备媒体查询？

Question

我的移动设备媒体查询在横屏模式下无法正常工作，可能是我没有正确显示media only screen。我没有使用任何框架，只是普通的CSS...

有人能指点一下我吗？提前感谢。

这就是我现在的样子。

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

我不确定我做错了什么。

- Ris

Answer 1

在CSS中有一个有用的属性/函数叫做orientation，它有两个选项：

1. 横向（Landscape）
2. 纵向（Portrait）

你可以这样使用它：

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

为了设定屏幕的最大和最小宽度，你可以尝试以下方法：

To attach the screen max and min width you can do something like this:

@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。

希望这能帮到您 :-)

- node_modules

---

谢谢...那么(min-width: 319px)或(max-width: 480px)怎么知道我的最小和最大值是多少呢？ - Ris

@Ris 你可以像你已经做的最小和最大宽度那样总结一下。这里有一份有用的文档，也许你想看看: https://css-tricks.com/snippets/css/media-queries-for-standard-devices :) - node_modules

Answer 2

这种媒体查询和视口高度的组合有什么作用呢？

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

100vh等于您的视口高度的100%。

110像素是我的导航栏的高度，（只需要根据您的尺寸进行调整）

- Ignacio Vazquez