如何识别设备是水平还是垂直旋转？

问题描述

我正在使用CSS的UI，当设备水平或垂直旋转时，我想应用不同的样式。我知道可以通过媒体查询来实现，但是我不知道具体的关键字（如果有的话）

我已经考虑过以某种方式计算和使用查询中的最大宽度和最大高度，但是我没有提出一个可行的解决方案。

在示例中，我将仅使用一些基本代码：

#menu {
    display: grid;
}

@media only screen and (max-width: 600px) { /* This is just an example to not break the code,I'd like to have there something like: max-width: device-height */ 
      display: flex;
}

我希望这是可以理解的，我将非常乐意提供帮助：）

解决方法

@media screen and (orientation: portrait) {
-----Horizontal-----------------
}

@media screen and (orientation: landscape) {
-----Vertical-----------------
}

media-queries