@media (max-aspect-ratio: ...)

アットメディアマックスアスペクトレシオ（メディアクエリ）

意味特定のアスペクト比以下の場合に適用

@media (max-aspect-ratio: ...)とは？

@media (max-aspect-ratio: ...)は、メディアクエリの一種で、デバイスのビューポートが指定した最大アスペクト比以下の場合にスタイルを適用するために使用します。

@media (max-aspect-ratio: ...)の具体的な使い方

最大アスペクト比に基づくスタイル適用の例

@media (max-aspect-ratio: 3/2) {
    body {
        background-color: lightblue;
    }
}

デバイスのビューポートのアスペクト比が3:2以下の場合に、body要素の背景色を薄い青に設定します。つまり、画面が横長のデバイスではなく、より正方形に近い形状のデバイスでこのスタイルが適用されることになります。

@media (max-aspect-ratio: ...)に関するよくある質問

Q. max-aspect-ratioの使い方は？

A. max-aspect-ratioは、指定したアスペクト比以下の画面に対してスタイルを適用するためのメディアクエリ条件です。

Q. min-aspect-ratioとの違いは？

A. min-aspect-ratioが指定比率以上の画面に適用されるのに対し、max-aspect-ratioは指定比率以下の画面に適用されます。

Q. 縦長画面に使えますか？

A. はい、例えば(max-aspect-ratio: 1/1)とすることで、正方形より縦長の画面にスタイルを適用できます。

@media (max-aspect-ratio: ...)が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSの@media (max-aspect-ratio: ...)や@media (color-index: ...)、@media (color: ...)、@media (pointer: ...)、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。