CSS媒体查询检测宽度是高度的两倍？

【问题标题】：CSS media query to detect width double the height?CSS媒体查询检测宽度是高度的两倍？
【发布时间】：2013-11-28 11:30:24
【问题描述】：

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

有没有办法做类似的事情最小设备纵横比：2 或者宽度 >= 高度 * 2 ?

【问题讨论】：

标签： css media-queries

【解决方案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(...)}
}

【讨论】：