幅を検出するCSSメディアクエリの高さは2倍ですか？

Question

こんにちは私はフルスクリーンのWebアプリケーション（サイト）を持っていて、実際にはワイドスクリーンを持っている人もいれば、ブラウザにツールバーがたくさんある普通のスクリーンで、視認可能な領域の幅を高さの2倍以上にしますその場合の異なる画像。

分-デバイスアスペクト比のような何かをする方法があります：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(...)} 
}