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

Question

有谁知道如何创建一个行为如下的媒体查询：

@media 屏幕和（宽度大于高度）{}

或者

@media 屏幕和（高度小于宽度）{}

对于语法规范中所述的内容，不可能使用“media_feature”作为值。有没有不使用 JavaScript 的解决方法？我能得到的最接近的东西是使用纵横比，但它不起作用。

谢谢。

Answer 1

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

\n\n

@media all and (orientation:portrait) { \xe2\x80\xa6 }\n@media all and (orientation:landscape) { \xe2\x80\xa6 }\n

\n\n

来自W3C 媒体查询规范：

\n\n

\n

当 \xe2\x80\x98height\xe2\x80\x99 媒体特征的值大于或等于 \xe2\x80\x98width\xe2\x80\x99 媒体特征的值。否则 \xe2\x80\x98orientation\xe2\x80\x99 是 \xe2\x80\x98landscape\xe2\x80\x99。

\n

\n\n

但请注意，通常担心实际宽度比担心方向更有意义，请参阅QuirksBlog 上的这篇文章了解详细信息。

\n

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 的背景图像。