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

Posted 2023-02-19

【中文标题】横向模式下的移动媒体查询？

【英文标题】：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*/

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

希望对你有帮助:-)

【讨论】：

谢谢...关于 (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 是我的导航栏的高度，（只需要适应你的尺寸）