アスペクト比でメディアクエリを適用させるmin-aspect-ratioの使い方+Sass mixinサンプル

アスペクト比でメディアクエリを適用させるmin-aspect-ratioの使い方+Sass mixinサンプル HTML / CSS
この記事は約3分で読めます。
スポンサーリンク

どうも上かるびです。

今回は「min-aspect-ratio(max-aspect-ratio)」でメディアクエリを適用させる方法をご紹介します。

基本コード

はじめに使い方です。

上記のコードの場合、アスペクト比が16:9以上のときに適用されます。

幅:高さ=16:9を超えたときというのはざっくり説明すると、

横長の長方形をビヨーンとずっと横長にしていったときに高さ9に対して幅が16以上になったときです。(イメージ図↓)

max-aspect-ratioはこの逆で、縦長になっていったときに適用されます。

このmin-aspect-ratioの良いところは、画面幅や要素の幅や高さに依存しないところです。

ちなみにアスペクト比の数値は16:9などよく見る比率だけでなく自由に設定可能です。(999:313など)

注意点

↑のコードの末尾に「正確なアスペクト比」とありますが、こちらはMDN公式サイトで書かれていましたので、こちらも合わせて記述しておくとよいかと思います。

実践コード

私の場合、ファーストビューで画面いっぱいの画像などをレスポンシブさせるときに使用することが多いです。

pictureタグのmediaにmin-aspect-ratioを記述して適用させます。

↑の場合min-aspect-ratioで1:1にしているので「正方形よりちょっとでも幅が長くなったらPC用の背景に切り替わる」という挙動になります。

具体例

例えば↓のようなファーストビュー。(PC)

画面高さいっぱいで表示させたい場合、object-fitやbackground-coverで実装したとしても正方形くらいで見切れてしまう部分が出てきそうです。

background-positionやobject-positionなどである程度調整はできますが、限界があります。

そんなときにこの画像が見切れそうな比率でmin-aspect-ratio(max-aspect-ratio)で背景画像を切り替える、ということができます。

素材は違いますがイメージDEMOです↓

Attention Required! | Cloudflare

このDEMOでは画像のサイズをそのままアスペクト比に設定しています。

Sassのmixin例

アスペクト比を引数に設定してその都度変更できるように作ってみました。自由にカスタマイズしてお使いください。

ネコーダー
ネコーダー

ちなみに引数のtopは分子、bottomは分母って意味もあるんだぜ

まとめ

デザインカンプは基本的にSP/PCでもらう場合が多いと思いますが、基本的には縦長か横長です。

ユーザーはほぼやらないけど検証とかでブラウザの高さを変えずに幅だけ狭めていくと、ノートパソコンの場合、横幅1000pxくらいで表示領域が正方形みたいな感じになるかと思います。

デザインによってはこの正方形くらいで崩れる、というパターンが割と多いかなと思いますので、ぜひどこかでご活用いただければ幸いです。

コメント

タイトルとURLをコピーしました