Question

想知道为什么在桌面上显示特定于景观的样式吗？

我在@media (min-width: 1024px) and (orientation:landscape)下指定了样式。这些是专门针对iPad景观的。但是，在桌面上仍可以应用这些样式吗？

Answer 1

非常简单。因为“风景”意味着视口的宽度更大，则视口的高度更大。大多数屏幕都是这样制作的。因此，可以，您的媒体查询将应用于桌面。与风景相反的是肖像。高度大于或等于宽度时的肖像。参考：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>

方向：横向显示适用于桌面

1 个答案: