どうも上かるびです。
今回は「min-aspect-ratio（max-aspect-ratio）」でメディアクエリを適用させる方法をご紹介します。
基本コード
はじめに使い方です。
|
1 2 3 4 5 6 7 8 |
@media screen and (min-aspect-ratio: 16/9) { //style } /* 正確なアスペクト比。上書きを防ぐために最下部に配置 */ @media (aspect-ratio: 1/1) { //style } |
上記のコードの場合、アスペクト比が16:9以上のときに適用されます。
幅:高さ＝16:9を超えたときというのはざっくり説明すると、
横長の長方形をビヨーンとずっと横長にしていったときに高さ9に対して幅が16以上になったときです。（イメージ図↓）
max-aspect-ratioはこの逆で、縦長になっていったときに適用されます。
このmin-aspect-ratioの良いところは、画面幅や要素の幅や高さに依存しないところです。
注意点
↑のコードの末尾に「正確なアスペクト比」とありますが、こちらはMDN公式サイトで書かれていましたので、こちらも合わせて記述しておくとよいかと思います。
実践コード
私の場合、ファーストビューで画面いっぱいの画像などをレスポンシブさせるときに使用することが多いです。
pictureタグのmediaにmin-aspect-ratioを記述して適用させます。
|
1 2 3 4 |
<picture> <source media="(min-aspect-ratio:1/1)" srcset="PC用の背景"> <img src="SP用の背景"> </picture> |
↑の場合min-aspect-ratioで1:1にしているので「正方形よりちょっとでも幅が長くなったらPC用の背景に切り替わる」という挙動になります。
具体例
例えば↓のようなファーストビュー。（PC)
画面高さいっぱいで表示させたい場合、object-fitやbackground-coverで実装したとしても正方形くらいで見切れてしまう部分が出てきそうです。
background-positionやobject-positionなどである程度調整はできますが、限界があります。
そんなときにこの画像が見切れそうな比率でmin-aspect-ratio（max-aspect-ratio）で背景画像を切り替える、ということができます。
素材は違いますがイメージDEMOです↓
このDEMOでは画像のサイズをそのままアスペクト比に設定しています。
Sassのmixin例
アスペクト比を引数に設定してその都度変更できるように作ってみました。自由にカスタマイズしてお使いください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
@mixin aspect-ratio($top: 4, $bottom: 3) { @media screen and (min-aspect-ratio: #{$top}/#{$bottom}) { @content; } @media screen and (aspect-ratio: 1/1) { @content; } } //使い方 @include apect-ratio{ //引数を設定していないので4:3以上で適用 .box{ background-color:salmon; } } @include apect-ratio(1,3){ //アスペクト比1:3以上で適用 .box{ background-color:gold; } } |
ちなみに引数のtopは分子、bottomは分母って意味もあるんだぜ
まとめ
デザインカンプは基本的にSP/PCでもらう場合が多いと思いますが、基本的には縦長か横長です。
ユーザーはほぼやらないけど検証とかでブラウザの高さを変えずに幅だけ狭めていくと、ノートパソコンの場合、横幅1000pxくらいで表示領域が正方形みたいな感じになるかと思います。
デザインによってはこの正方形くらいで崩れる、というパターンが割と多いかなと思いますので、ぜひどこかでご活用いただければ幸いです。
コメント