CSS媒体查询检测宽度加倍高度？

Question

嗨我有一个全屏网页应用程序（网站），有些人有非常宽的屏幕，或者在他们的浏览器中有一堆工具栏的常规屏幕，使可视区域的宽度超过高度的两倍，我想要为这种情况加载不同的图像。

有没有办法做类似的事情 min-device-aspect-ratio：2 要么 宽度> =高度* 2 ？

Answer 1

查看min-aspect-ratio和max-aspect-ratio CSS媒体查询：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

然后，您可以使用CSS根据宽高比指定不同的图像（作为背景图像）。

/* regular, default image */
#myImage {background-image: url(...)}

/* image to use when screen width is more than double the height */
@media screen and (min-aspect-ratio: 2/1) {
    #myImage {background-image: url(...)}
}