如何解决如何识别设备是水平还是垂直旋转?
我正在使用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-----------------
}
有关更多信息:https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。