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

Question

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

有没有办法做类似的事情最小设备纵横比: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(...)}
}