html - 方向 : Landscape showing true for desktop

Question

想知道为什么横向特定样式在桌面上显示为真？

我在 @media (min-width: 1024px) 和 (orientation:landscape) 下指定了样式。这些是专门针对 iPad 横向的。但是，这些麦粒肿在桌面上仍然适用吗？

Answer 1

其实很简单。因为横向意味着如果视口(viewport)的宽度大于视口(viewport)的高度。大多数屏幕都是这样制作的。所以是的，您的媒体查询应用于桌面。风景的反面是肖像。当高度大于或等于宽度时，它是肖像。引用:https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation

示例:

body {
  display: flex;
}

div {
  background: yellow;
}

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}
@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}

<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>