CSSピクセル

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

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

デバイスピクセル

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

デバイスピクセル比

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

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