レスポンシブ対応のサイト制作で不可欠なのがメディアクエリ(@media)の記述です。私自身、曖昧なまま使っていた所があり、すんなり思い通りにならない、コンパクトに書けなかったしています。実践しやすい様に、まとめてみました。気になるiPhone12のサイズもご紹介します。
メディアクエリとは
初心者向けに説明すると、レスポンシブ対応サイトでは画面のサイズによって、デザインやレイアウトが変わる様にしますよね?それをどの画面サイズで変えるかどうか、@media・・・を使って指示を出します。
メディアクエリをどの様に書くかは、[Bootstrap] ブレイクポイント @media で紹介しています。
ちなみに、@media()となっている場合と、@media screen and ()とか書いてある事がありますが、「screen」はスマホ、PCなど画面的な物への指示という事です。「print」とした場合は、印刷した際にどう見せるとという事になります。
ブレイクポイント
大体こんな感じです。参考まで。
/* 小さなデバイス (スマホ,576pxとそれ以上)*/
@media (min-width: 576px) { ... }
/*中間のデバイス (タブレット, 768px とそれ以上)*/
@media (min-width: 768px) { ... }
/* 大きなデバイス(デスクトップ, 992px とそれ以上)*/
@media (min-width: 992px) { ... }
/* もっと大きなデバイス (大型画面のPC, 1200px とそれ以上)*/
@media (min-width: 1200px) { ... }
/* とっても小さなデバイス (小さなデバイス,576pxとそれ以下)*/
@media (max-width: 575.98px) { ... }
/* 小さなデバイス (スマホ, 768pxとそれ以下)*/
@media (max-width: 767.98px) { ... }
/* 中間のデバイス(タブレット, 992pxとそれ以下)*/
@media (max-width: 991.98px) { ... }
/* 大きなデバイス (デスクトップ,1200pxとそれ以下)*/
@media (max-width: 1199.98px) { ... }
Appleあれこれ
画面サイズの種類が多すぎてストレス!どこまで追うかは貴方次第です。殆どの場合、縦で閲覧しているだろうと割り切る事も大事かもしれませんね。
iPhone 5 | 320 x 568 |
iPhone 6/7/8 | 375 x 667 |
iPhone 6/7/8 Plus | 414 x 736 |
iPhone X/11 | 375 x 812 |
iPad Pro | 1024 × 1366 |
iPad | 1024 × 768 |
iPhone12 と Airのサイズ
たとえば、iPhone12 mini専用のブレイクポイントを設定する場合は、下記の表を参考にこの様に書けばOKです。
@media screen and (max-width: 375px;){ ... }
iPhone 12 mini | 375 × 667 |
iPhone 12 | 390 x 844 |
iPhone 12 Pro | 390 x 844 |
iPhone 12 Pro Max | 428 x 926 |
iPadAir 4 | 820 × 1180 |
ipad対策
ipadのデザインがどうしてもシックリこないので、追加するしかない場合
/* タブレット 1024pxとそれ以下*/
@media screen and (max-width: 1024px) {・・・}
皆のメディアクエリ
2021年1月現在の、いろいろなサイトのおすすめの組み合わせ。どれがベストなのでしょう?
@media screen and (max-width: 480px) {...}
@media screen and (max-width: 896px) {...}
@media screen and (max-width: 1024px) {...}
@media screen and (max-width:599px) {...}
@media screen and (min-width: 767px) and (min-width: 600px) {...}
/*タブレットとスマホ 異なるMAX値*/
@media screen and (max-width: 1068px) and (min-width: 768px) {...}
@media screen and (min-width: 1069px) {...}
@media screen and (max-width: 768px) {...}
@media screen and (max-width: 1024px) {...}
@media screen and (min-width: 481px) {...}
@media screen and (min-width: 769px) {...}
andの使い方
screen andとしか使えない事はありません。サイズの指定を増やす事も可能です。
375px 以上で、768px 以下としたい場合は、
@media (min-width:375px) and (max-width:768px) {...}
< や >の記号の使い方
AよりBが大きい、又は小さいなどに使う記号(?)を使う事が出来ます。
576px より小さい画面。つまり、画面の横幅< 576px と書く感じ。
@media screen and (width < 576px) {...}
600pxまたは、それより大きい
@media screen and (width >= 600px) {...}
また、上記2つの使い方をミックスする事も出来ます。
画面の横幅が576px より大きくて 768px未満
@media screen and (320px <= width < 768px) {... }
, カンマの使い方
カンマで区切ると、又は(or)の意味になります。
576px 以上又は、768px 以上としたい場合は、
@media (min-width:576px),(min-width:768px) { ... }
@media onlyについて
古いブラウザで、誤解が生じない様に使用していた模様です。現在は必要性が無い様です。
参考
もっと複雑な書き方も掲載されていますが、結論としてはじめの章でご紹介した一般的なブレイクポイントで書いた方が分かり易くて良さそうです。すっきり書こうと、アレコレ書いてしまうと、後で訳が分からなくなってしまう事になります。
W3C メディアクエリについて(英語サイト)
コメント ※ハンドルネームでお願いします