如何仅使用CSS媒体查询检测窗口尺寸哪个更大？

Question

有没有人知道如何创建一个媒体查询，使其表现如下：

@media screen and (width大于height){}

或者

@media screen and (height小于width){}

根据语法规范所述，不能使用'media_feature'作为值。有没有不用JavaScript的解决方法？我所能找到的最接近的东西是使用aspect-ratio，但它并不实用。

谢谢。

- Bill_BsB

Answer 1

您可以使用方向媒体查询：

@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }

来自W3C媒体查询规范：

当“高度”媒体特征的值大于或等于“宽度”媒体特征的值时，“方向”媒体特征为“纵向”。否则，“方向”为“横向”。

但请注意，关注实际宽度通常比关注方向更有意义，详情请参见QuirksBlog上的文章。

- N3dst4

Answer 2

@N3dst4的答案只适用于1:1的比较。如果你正在寻找其他内容，可以使用aspect-ratio：

@media screen and (max-aspect-ratio:4/3) {
  #bg {
    width: auto;
    height: 100%;
  }
}

@media screen and (min-aspect-ratio:4/3) {
  #bg {
    width: 100%;
    height: auto;
  }
}

我使用上述代码片段来正确缩放4:3的背景图像。

- moshen

Answer 3

谷歌搜索的第二个结果：http://css-tricks.com/6731-css-media-queries/

该页面示例的第一部分：

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

使用max-width或max-height与“高度小于”等效。

同样适用于高度。

- Thor Jacobsen

---

这并不是将宽度与高度进行比较，而是将宽度 或者 高度与给定值进行比较。OP 想要知道页面是“高”还是“宽”（即横向或纵向）。 - N3dst4