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(...)} 
}