4Kホームページ制作メモ part5 、どの解像度が必要？

よくアクセスされる固定画像についての考察です。

より高鮮明になるレンティナディスプレイ等は考慮していません。

まぁ、max-width: 100% ってやればどの解像度にも確かに適切に配信できますが、表示速度や利用者に過剰にギガの請求をさせない（実質利用制限のないMNOの楽天モバイルや安めな20Gプランが増えたため、そこまで気にする人最近あまりいないようですが）ためにも、きめ細やかに設定する

横幅一覧

• 375
• 414
• 428

→iPhoneのあるバージョンとCSSピクセルの横幅が一致

• 512
• 750

→このあたりまで高解像度のスマホが出力してもおかしくない横幅

• 810
• 992
• 1100

→ここまでタブレッドがほとんどと思われる
→今は使う人あまりいないかもしれませんが、1024x768のPCディスプレイも横解像度1100にフィットします。

• 1284
• 1680
• 1920

→このあたりより（たぶんWindows 7ぐらい以降の）PCが出てくる

なお、Windowsが画面拡大することから、1920は4Kノートパソコン、4Kモバイルモニタ（並びにCSSピクセルを利用するフルHD超えタブレッド）にも該当すると推測される

4Kノートパソコンは十分に持ち運びできるサイズですので、ギガの使いすぎ防止（それでも画像は大きい）で、適切な解像度を用意する

• 2160
• 2600
• 3840

フルHDを超えると完全にPCの領域となります。

タブレッドの物理解像度は2160とかそういうのがありますが、CSSピクセル等で認識されるので、このような解像度は出ないと推測されます。

デスクトップ4Kディスプレイで実質従量制の回線で閲覧される可能性も少なからずあるので、最低限でもブレークポイントを指定しておきます

（実際動かしていないが）仮にbootstrapを4K対応するとしたら？

最新の5バージョン系で改造するとしたら

_variables.scss

/* 430行ぐらい */
// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.

// scss-docs-start grid-breakpoints
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
  hd2k: 1920px,
  wqhd: 2560px,
  hd4k: 3840px,
  hd8k: 9999px
) !default;
// scss-docs-end grid-breakpoints

に変更して

npm install
npm run dist

でビルドしておけばよさそうな感じは一応はします