こんにちは（・∀・）
以前【CSS】レスポンシブデザインのブレークポイントは
でブレークポイントをいくつも作ると管理が大変だからメジャーブレークポイントを一つ作って...
という投稿をしましたが、
全部じゃなくてもいいので、現在市販されているデバイスサイズをなるべくカバーしたい...というお願いを受けることもあると思います。
ブレークポイント
今日はそんなオーダーを受けた時にピッタリ、ブレークポイントを細かく設定してみます。
細かくと言っても今回作ったブレークポイントはたったの10個です。
あ、やっぱりちょっと多いですか
必要に応じて調整してください。
それでは最初にサンプルをご覧ください。
ブラウザサイズを変えると見出しの後ろに指定してある画面サイズが表示されます。
Result
サンプルデモはこちら
スマホでのご確認はこちらをどうぞ
それではコードを見ていきましょう。
ブラウザサイズを変えたときわかりやすいと思うので、CSSは画面サイズによって見出しにコメントを挿入する形にします。
また、モバイルファーストでCSSの記述していきますので@mediaで囲われていない部分に書いたCSSがデザインの基本形になります。
最初に現れる@mediaがmin-width:321pxなので、@mediaで囲われていない部分は0〜320pxまでとなります。
このサイズは主にiPhone SE向けのデザインになります。
/*0〜320px*/
.sample-demo h3:after {
content: "0〜320px";
}
320pxまでの画面サイズの場合、ここまでに設定したCSSが反映されます。
最初のブレークポイントです。
Android端末で多いサイズ、321px〜360px。
@media (min-width: 321px) {/*Android*/
.sample-demo h3:after {
content: "321px〜360px";
}
/* ** */}
min-widthが321pxなので321px以上の画面サイズには、ここで指定したCSSが上書きされます。
次はiPhone 8・iPhone Xのサイズ、361px〜375px。
@media (min-width: 361px) {/*iPhone 8・iPhone X*/
.sample-demo h3:after {
content: "361px〜375px";
}
/* ** */}
min-widthが361pxなので361px以上の画面サイズには、ここで指定したCSSが上書きされます。
次もAndroid端末向けサイズ、376px〜412px。
@media (min-width: 376px) {/*Android*/
.sample-demo h3:after {
content: "376px〜412px";
}
/* ** */}
min-widthが376pxなので376px以上の画面サイズには、ここで指定したCSSが上書きされます。
次はiPhone 8+のサイズ、413px〜414px。
@media (min-width: 413px) {/*iPhone 8+*/
.sample-demo h3:after {
content: "413px〜414px";
}
/* ** */}
min-widthが413pxなので413px以上の画面サイズには、ここで指定したCSSが上書きされます。
次はiPhone SE・iPhone 8・iPhone 8+・iPhone X横 Android系横 iPad縦のサイズ、415px〜834px。
@media (min-width: 415px) {/*iPhone SE・iPhone 8・iPhone 8+・iPhone X横 Android系横 iPad縦*/
.sample-demo h3:after {
content: "415px〜834px";
}
/* ** */}
min-widthが415pxなので415px以上の画面サイズには、ここで指定したCSSが上書きされます。
次からはPC向けの画面サイズ、835px〜959px。
@media (min-width: 835px) {
.sample-demo h3:after {
content: "835px〜959px";
}
/* ** */}
min-widthが835pxなので835px以上の画面サイズには、ここで指定したCSSが上書きされます。
同じくPC向けの画面サイズ、960px〜1023px。
@media (min-width: 960px) {
.sample-demo h3:after {
content: "960px〜1023px";
}
/* ** */}
min-widthが960pxなので960px以上の画面サイズには、ここで指定したCSSが上書きされます。
次はiPad横画面、iPad Pro縦画面及びPC向けの画面サイズ、1024px〜1059px。
@media (min-width: 1024px) {/*iPad横 iPad Pro縦*/
.sample-demo h3:after {
content: "1024px〜1059px";
}
/* ** */}
min-widthが1024pxなので1024px以上の画面サイズには、ここで指定したCSSが上書きされます。
次もPC向けの画面サイズ、1060px〜1199px。
@media (min-width: 1060px) {
.sample-demo h3:after {
content: "1060px〜1199px";
}
/* ** */}
min-widthが1060pxなので1060px以上の画面サイズには、ここで指定したCSSが上書きされます。
最後はiPad Pro横画面及びPC向けの画面サイズ、1200px以上。
@media (min-width: 1200px) {/*iPad Pro横*/
.sample-demo h3:after {
content: "1200px〜";
}
/* ** */}
min-widthが1200pxなので1200px以上の画面サイズには、ここで指定したCSSが上書きされます。
デザイン次第ですが、ブレークポイントを細かく分けても更新に手間がかからないようにすることはできます。
デザインとコーディングが兼任の方はその辺を考えてデザインすると良いと思います。
デザインとコーディングが分業の場合、デザイナーとコーダーで話し合う必要はありますね。
