Web制作のアレコレ

なんとかpxだとか比率

CSSピクセル

CSSピクセルとはWebサイトをブラウザで表示する際の擬似的なピクセル数を指しています。
コーディングの時に指定するサイズがCSSピクセルになります。
下の表をもとにマークアップすることになります。
メディアクエリなどで指定するブレイクポイントはこのCSSピクセルを利用して指定しています。

よく使われているスマートフォンのCSSピクセル

デバイス CSSピクセル
iPhone 5/5s/SE 320 x 568
iPhone 6/6s/7/8 375 x 667
iPhone 6/6s/7/8[Plus] 414 x 736
iPhone X/XS 375 x 812
iPhone XR/XS MAX 414 x 896

デバイスピクセル

デバイスピクセルとは実際のディスプレイのピクセル数を指しています。
このデバイスピクセルは画像を表示する際に重要なもの。

デバイス デバイスピクセル
iPhone 5/5s/SE 640 x 1136
iPhone 6/6s/7/8 750 x 1334
iPhone 6/6s/7/8[Plus] 1080 x 1920
iPhone X/XS 1125 x 2436
iPhone XR 828 x 1792
iPhone XS MAX 1242 x 2688

デバイスピクセル比

デバイスピクセル比とはCSSピクセルをいくつのデバイスピクセルで表示するかの比率です。
デバイスピクセル比が2(2倍)の場合、1つのCSSピクセルを「縦2倍 x 横2倍」の計4つ(4倍)のデバイスピクセルで表示します。
デバイスピクセル比が3(3倍)の場合、1つのCSSピクセルを「縦3倍 x 横3倍」の計9つ(9倍)のデバイスピクセルで表示します。
これらを1pxとして扱うことで、文字や内容(画像は例外)をキレイに描写することが出来ます。

式に表すと、
[CSSピクセル] × [デバイスピクセル比] = [デバイスピクセル]

デバイス CSSピクセル デバイスピクセル デバイスピクセル比
iPhone 5/5s/SE 320 x 568 640 x 1136 2
iPhone 6/6s/7/8 375 x 667 750 x 1334 2
iPhone 6/6s/7/8[Plus] 414 x 736 1080 x 1920 2.6
iPhone X/XS 375 x 812 1125 x 2436 3
iPhone XR 414 x 896 828 x 1792 2
iPhone XS MAX 414 x 896 1242 x 2688 3