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

Question

我正在 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;
}

我希望它是可以理解的，我会很高兴得到任何帮助:)

Answer 1

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

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

更多信息：https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation

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

How to recognize if device is turned horizontally or vertically?

css

media-queries