媒体查询 - 视口的高度是否大于宽度？答案

【问题标题】：Media Query - is height of viewport larger than width?媒体查询 - 视口的高度是否大于宽度？
【发布时间】：2013-01-15 21:09:22
【问题描述】：

是否可以使用 CSS3 媒体查询来询问：

'视口的高度是否大于宽度'？

或：

'视口的宽度是否大于高度'？

我希望我的图像在两个方向上都是流畅的！

谢谢。

【问题讨论】：

【解决方案1】：

为此，您可以使用以下媒体查询：

orientation:portrait
orientation:landscape

我无法向您提供有关媒体查询的更多信息，因为我还没有研究过它们。请确保您希望支持的设备支持它们。

至于 CSS：不，您无法使用 CSS 检测视口的宽度和高度。 CSS 不是一种编程语言，而是一种样式语言。除非您使用 CSS 预处理器（Sass、Less），否则您将无法用它做任何智能的事情。

【讨论】：

附带说明，应该可以分别使用 @media all and (width: 100vmax) 和 @media all and (height: 100vmax) 表示宽度 > 高度和高度 > 宽度，因为 W3C 推荐规范允许所有标准值。然而，目前似乎没有浏览器支持这一点……同时使用两者可能是一种非侵入式的未来证明，以最大限度地提高兼容性？
我没有答案。但是，重要的是要记住，上面提到的技术仍在实现中，并且在某些情况下不向后兼容（过时的浏览器）。我个人会尝试采用当今现代浏览器支持的技术，并在需要时提供备用。（虽然对于像 IE6 这样的浏览器，我只是切换到了 Andy Clarke 的 Universal IE6 Stylesheet。）

【解决方案2】：

先生。外星人在某些技术上可能是正确的，因为我不是程序员。但是，如果您想重新设计布局或根据屏幕是横向（宽度大于高度）还是纵向（高度大于宽度）模式进行调整，您绝对可以使用 css 媒体查询。

【讨论】：