mini6(8.3インチ)が出たので更新しています。mini6が入っていない内容です。MacBookもM1チップでProじゃなくてAirで十分みたいになっていて、大きさやスペックが大きければいいみたいな時代は終わって、自分に合ったものを選ぶ人がより増えてきたように感じています。前回が2019年5月にレスポンシブデザインのブレイクポイントの記事を書いて、今でもたくさんのアクセスがあり、たいへん嬉しく思っています。そこで今回2021年に向けて内容を見直しました。miniなど新しいサイズも増えて、より複雑になった印象です。Viewを気にしない人は、去年と同じ560px/960pxでも問題はないです。hashimotosan.hatenablog.jpポイントは前回と同様に画面をポートレート、ランドスケープの切り替えで変化を起こすようにしています。ポートレートがスマホ表示の場合→ランドスケープはタブレット表示ポートレートがタブレット表示の場合→ランドスケープはPC表示そうすることで、使う人が自分にあった表示でサイトを閲覧できるようになります。PDFはこちらからどうぞただ今回もっと深堀りすると、とても細かい微妙なニュアンスでブレイクポイントを考えました。Air10.9(585x820px)※黄色背景のところのどこでタブレット表示を分けるか非常に悩みました。結論としては2021年のブレイクポイントは520px/960pxにしました。Mini(507px)」の方ので納得もいきます。Air10.9(585px)ではなぜ520pxにしたかとではなぜ520pxにしたかというと、実際どう見えるかという実寸のサイズで見たときに解像度だけでは見えない見え方が分かったからです。miniが解像度の差以上に、小さく見えます。miniはピクセル密度が高いため、小さいサイズの中にピクセルが詰まっているためです。miniをポートレートにしてサイズを比較してみます。Air10.9(113mm)・iPad10.2(104mm)※サイズの図り方はApple公式のサイズに端末の写真をはめ込み、画面のサイズを図っているため、数ミリ単位でののズレはあるかと思いますので、比較用の参考数字となります。Miniのポートレートと幅がほとんど同じ(1cm前後の差)くらいだということが分かります。Viewの等分分割はタブレット扱いとしました。Mini(507px)はスマホ表示にします。他が8の倍数で作られているので、8の倍数の「520px」としています。これが2021年版の最新のブレイクポイントになります。※前回よりタブレット表示を40px小さくしています。{...}※「以下」ではなく「未満」にするために、メディアクエリの数字を一つ減らすのがポイントですね。モバイルファーストでスマホベースで作成していくのであれば以下になります。and」が入っていましたが、最近ではつけくてもいいようです。960px以上ちなみに、ブレイクポイントはあくまで表示領域に合ったサイズで表示を変化させるポイントであって、リキッドレイアウトで可変を想定したもの(幅をcalcや%での指定で固定幅にはしない)ということとは別の概念です。個人的にはリキッドレイアウトにして、どのブラウザサイズでもちゃんと表示されることが前提で、その上で、ブレイクポイントで3つ並びのものが、2つ並びに変化するなどを追加するイメージです。一例としては、デザイン自体は900px幅をベースにつくって、左右の余白を30pxにすると、全体で960pxになります。繰り返しになりますが、520pxと960pxはあくまで表示切り替えのブレイクポイントで、デザインのコンテンツ幅は、900pxにしたりもっと狭くしたりして、可変のリキッドデザインにします。前回の記事を書いた後の2019年後半のiPad(第7世代)から7.9インチから10.2インチに変わり、画面解像度も768×1024pxから810x1080pxに変わっていたことは今回見直して気付きました。viewでの表示も変わっています。今回はAndroid端末も大幅に見直しました。Miniなど最新のものを想定しています。Googleアナリティクスから表示の多い画面サイズも参考にしています。お知らせYouTubeチャンネル「ちいさなデザインの話」を開設しました。「WEB制作ドキュメント」「10分デザイン考」などデザイン情報を発信していますのでこちらもぜひよろしくお願いいたします。最近YouTubeをはじめましてみました。iPhone9(仮)が2020年3月発売と噂されてお...2019-05-28【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版]↓↓↓最新の2021年版を作成しましたのでこちらもご覧ください。12スポンサーリンク引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。