【2019年2月修正追記】レスポンシブ CSSメディアクエリ(@media)ブレイクポイントまとめ

レスポンシブ CSS メディアクエリ ブレイクポイントまとめ
メディアクエリもCSS次第ではあるが、iPhone XさらにはX MaxやXR、さらにはiPad Pro 12.9/11などの登場で、レスポンシブは壊滅、ブレイクポイントも迷走。もはやモバイルファーストを徹底するしかないのだろうか?

CSS メディアクエリ(@media)受難
レスポンシブWebデザイン崩壊!?

あくまでも自社用として、必要なことだけのまとめ。

検索しても、スバリの情報がなかなか見つからない。また、無視してかまわないことに惑わされる者がいて、現場が騒がしくなって混乱したりすることもある。

その自社であるが、ポリシーもなく場当たり的でいろいろなサイズの画像があり、うかつにもwidthを設定していたり、CSSもぐだぐだ。

パソコンにつないだフルHD(1920×1080)モニターで確認しながらWebページを作成しCSSを記述するので、モバイルファーストではなくPCファーストのメディアクエリとなっている。

なお、PCファーストは、Apple信者には腹立たしいかもしれないがMacも含まれ、またデスクトップファーストとも呼ばれている。
ノートパソコンであっても、デスクトップと一括される(笑)

メディアクエリ混乱 ブレイクポイント迷走 レスポンシブ崩壊

自サイトも、iPhone Xであれこれ眺めてみると、かなり崩れている
X MaxやXRでは、もっと悲惨かもしれない…

というよりも、Mac XcodeのiOSシミュレーターや、ブラウザーのレスポンシブ表示確認でも、えらいことになっている…

またまた、社内用として、現時点での方向性を決めておきたい

レスポンシブ メディアクエリ 簡易版

面倒臭いので、簡易版のメディアクエリを採用したい

iPhone XS Max/XR および iPad Pro 12.9/11対応

iPhoneだけでも、2018年からは、大ごとになっている

iPhone XS Max/XR および iPad Pro 12.9/11 対応
タブレット 横はパソコンと同じ
タブレット 縦のみ@media screen and (max-width: 1024px) and (orientation: portrait)
タブレット 縦から@media screen and (max-width: 1024px)
スマホ 横のみ@media screen and (max-width: 896px) and (orientation: landscape)
スマホ 横から@media screen and (max-width: 896px)
スマホ 縦からは@media screen and (max-width: 480px)

新レスポンシブ:スマホ縦(max-width: 480px)からのみ

こうなったら居直って、ほんとうの簡易版としては、スマホ縦画面に合わせただけのメディアクエリ・ブレイクポイントでもいいかもしれない

@media screen and (max-width: 480px) { }

スマートフォンのシェアが増え、かつほとんどが縦画面で見ていると想定するなら、これが落ち着きどころと言える
小画面スマホなら、横も480pxでおさまりそう

もとより、タブレットはパソコンと同じでもよかった
さらに、今では大画面のスマートフォンでは、横向きではタブレットつまりパソコンと同じでもかまわないとみなせる

すべての横幅サイズを相対値(% em あるいは rem)などで設定するなら、最低限のスマホ横のみで間に合うはずだ

スマホ横までは、同じCSSでまかなえることが、理想だろう

スマホ縦では、複数ブロックの横並びを縦並びに変えるという作為が必要になる

タブレットは、横はパソコンと同じ、縦が悩ましいが

.container { max-width: 1024px; }

PCファーストにしているから苦労するだけで、bodyの中にidやclassでcontainerなりcontentsなりのdivを入れているテンプレートが多いので、横幅最高1024pxにしておけば、
タブレット縦も、スマホ横も、ほぼ同じCSSで済ませることができるはずだ

新レスポンシブ:タブレット縦/スマホ横/スマホ縦

今、いろいろなサイトで、大画面デバイス対応を模索しているが、落ち着きどころとしては、
既存のメディアクエリ・ブレイクポイントにも左右されるので、パソコン(タブレット横)/タブレット縦/スマホ横/スマホ縦 で振り分ける案に固まりつつある

@media screen and (max-width: 1024px) { }
@media screen and (max-width: 896px) { }
@media screen and (max-width: 480px) { }

上述のように、「.container { max-width:1024px; }」にしておけば、タブレット縦やスマホ横のCSS記述は、圧倒的に少なくなるはず

.container { max-width: 1024; }

あとは、モバイルファースト(ないしモバイルオンリー)というポリシーで、パソコンなどの表示で少しくらいデザインが気に入らないとか、損切りする覚悟で行こう!

2019年2月4日追記
レスポンシブ メディアクエリ 詳細版(iOS)

なまじデバイスを複数そろえていると、つい確認したくなる。
確認すると、細かいところが気になってしかたないことが多い。

追記:iPhone X以降と、iPad Pro以降で、まとめ直している

2019年1月版(iPhone XS Maxまで)
デバイス「横」の画面幅「縦」の画面幅
デバイスの横・縦横で見る画面の幅縦で見る画面の幅
iPad Pro(12.9)1366px1024px
iPad Pro(11) 1194px834px
iPad Pro(10.5)1112px834px
iPad1024px768px
iPhone XS Max/XR896px414px
iPhone XS/X812px375px
iPhone 8/7/6s/6 Plus736px414px
iPhone 8/7/6s/6667px375px
iPhone 5s/5/SE568px320px
iPhone 4(以下)480px320px
XPERIA640px360px

メディアクエリ混乱 ブレイクポイント迷走 レスポンシブ崩壊

スマートフォン デバイスが変化し続けるため、iPhone XS Max/XRのように想定外のスマホ画面になっているので、画面の横幅(max-width)だけのメディアクエリ・ブレイクポイントでは、既存のCSSでは対応できなくなっている可能性がある

かつては、余裕があるときは、複数のスマホ、縦や横の画面でも見栄えをよくすることがあった。
が、今や余裕はなくなってきた…

レアなメディアクエリ・ブレイクポイント:デバイスの縦や横、CSSファイルそのもの

レアな情報としては、デバイスの縦や横で提供されるブレイクポイントの書き方もある。

@media screen and (orientation: portrait) {/* 縦向き */}
@media screen and (orientation: landscape) {/* 横向き */}

あるいは、CSS内ではなく、川上というかhead要素でメディアクエリをやる方法もある。

<link rel="stylesheet" href="sp.css" media="screen and (max-width: 480px)">

1枚のCSSよりも、デバイスごとの表示も安定し、サイト運営側の生産性が高まる可能性もある

orientation:portrait または landscape 注意点

たとえば、上記の「パソコン(タブレット横)/タブレット縦/スマホ横/スマホ縦」のつもりで、次のようなメディアクエリ・ブレイクポイントを設定すると

@media screen and (max-width: 1024px) { }
@media screen and (max-width: 896px) and (orientation: landscape) { }
@media screen and (max-width: 480px) { }

スマホ横の896px以下での設定は、スマホ縦の480px以下には、継承されない(厳密に検証したわけではないが…)
また、タブレット縦の896px以下は、その上の1024px以下の設定が継続

よって、
スマホ縦の480px以下で、必要なものを重複して記述
タブレット縦の896px以下でも、特別に設定したいことがあれば、

@media screen and (max-width: 896px) and (min-width: 481px) and (orientation: portrait) { }

あほらしいが、このように別途ブレイクポイント設定が必要となる

モバイルファーストのメディアクエリなら

Googleは、とにかく「モバイルファースト」を推奨、推進している。

まったく体感できていないが、
モバイルファーストのCSSメディアクエリでは、スマホでの表示が速くなると強調されている。

とりあえず、モバイルファーストのブレイクポイントの書き方もさらっと書いておこう。

モバイルファーストのメディアクエリ 簡易版

モバイルファーストでは、まず、全デバイスで共通のCSSを書いておいてから、横画面の小さいものから記述していく。

メディアクエリなし 【スマートフォン縦】
@media screen and (min-width: 481px) { } 【スマートフォン横】 @media screen and (min-width: 769px) { } 【タブレット縦以上】

また、最大を示す「max-width」でななく、最少の「min-width」を指定する。

さらには、最小と最大を厳密に指定する書き方もある。

@media screen and (min-width: 481px) and (max-width: 768px) { }

いずれにせよ、設計が重要であり、複数が携わったり、担当者が変わったり、方向性が浸透しなければならない。

モバイルファーストのメディアクエリ 実践版

とにかく、モバイルファーストを徹底する。
スマホ縦を標準として、次にタブレット縦、最後にPC(デスクトップ/タブレット横)と記述していく

全デバイス/画面サイズに共通
かつ 480:スマートフォン縦
 
タブレット縦 /スマートフォン横@media screen and (min-width: 481px)
デスクトップ/タブレット横@media screen and (min-width: 769px)

もはや、レスポンシブと偽装しパソコンWebをスマホでも表示できる、というような戯言は止めるべき
結局は、デスクトップファーストに過ぎない

モバイルファーストとは、決定的な違いがある

ChromeのデベロッパーツールやFirefoxの開発ツール

GoogleのChromeのデベロッパーツール、ElementsでHTMLソース指定の箇所を選択すると、画面でも該当箇所がハイライトされ、Elementsの下のStylesで効いているCSS、ファイル名と行番号が表示される。

これは、どれが問題なのか瞬時に分かって、非常にありがたい。

デベロッパーツールは、Ctrl + Shift + I、それからCtrl + Shift + Mでレスポンシブ確認できる。(Macなら、command + shift + ○)

Firefoxの開発ツールも、ほぼ同じである。
こちらは、いきなりCtrl + Shift + Mでレスポンシブ確認できる。
また日本語化されている。

ChromeもFirefoxも、ユーザーエージェントも同時に切り替わるので、実機と同じような確認ができそう

WordPressで記事を投稿するときは、公開前にプレビューを、デベロッパーツールなどで確認する。

なお、実機とは違った表示のときもあるので、注意。
パソコンのChromeやFirefox(あるいはMacのSafari)のレスポンシブ確認と、iPhone/iPadのSafariとは、同じではないので