レスポンシブWebデザインのコーディングで用いられるCSSメディアクエリ。

デバイスサイズ（横幅）で制御するだけではなく、画面のアスペクト比でも適用するCSSを制御できることはご存じでしょうか。

今回はメディアクエリのアスペクト比について、コードを紹介しながらポイントを解説します。

アスペクト比のメディアクエリコード

@media (aspect-ratio: 16/9) {
  // 画面幅が16:9の時スタイルが適用される
}

16/9のところがアスペクト比の横：縦の指定です。

アスペクト比16:9以上で適用

@media (min-aspect-ratio: 16/9) {
  // 画面幅が16:9以上の時スタイルが適用される
}

アスペクト比16:9以下で適用

@media (max-aspect-ratio: 16/9) {
  // 画面幅が16:9以下の時スタイルが適用される
}

※アスペクト比が16:10の場合、max-aspect-ratio: 16/9は適用されません。

min-aspect-ratio、max-aspcet-ratioを用いる場合、実際に画面幅を変更してテストすることを推奨します。

画面幅はわかっていても最小のアスペクト比がわからない、計算が面倒だと言う方は、
アスペクト比計算ツールに横幅と高さを入れるとアスペクト比が算出されるため楽ができます。
算出された値をaspect-ratioでご利用ください。

上記コードのプレビューはこちらでご確認ください。

ブラウザ対応状況

IE以外のモダンブラウザには対応しているようです。
2021年2月時点でのCan I Useにて確認。

aspect-ratioの注意点

アスペクト比はスクリーンサイズではなくブラウザの描画領域で判定されるようです。
PCで開いている場合、ブラウザの横幅と、タブやブックバークバーなどを含まない高さの比率で判定されます。
JavaScriptでいうと、window.innerWidthとwindow.innerHeightの値が用いられます。

こちらのサイトで利用している端末の描画領域が確認できます（ウィンドウの幅と高さ）。

確認した横幅と高さをアスペクト比計算ツールに入れるとブラウザ描画領域のアスペクト比が算出できます。

aspect-ratioの使い所

私は、複数の要素をフルスクリーン1画面でキレイに収めるデザインのコーディング時にaspet-ratioを用いました。
ブラウザの高さでメディアクエリを切り分けられないため、1画面に収めたいけど高さが足りないときの対応で、高さの代わりにアスペクト比でスタイルを変更しました。

画面のアスペクト比というと、スマホやタブレットの縦横の判定でも使えそうと思う方がいるかも知れませんが、縦横の判定はaspect-ratioではなくorientationを用いた方が良いです。

余談ですが、orientationはPCで表示しているブラウザでも判定されたので、
orientationやaspect-ratioを用いる場合はwidthと組み合わせたほうが安全です。

@media (orientation: landscape) and (max-width: 1024px) {
  // 画面が横長かつ横幅1024px以下の時にスタイルが適用される
}

まとめ

アスペクト比によるメディアクエリは使い所がなかなか少ないですが挙動が独特なので解説してみました。

本記事が皆様のお役に少しでも立てれば幸いでございます。