[CSS] ピクセルは1画素を表していない 実はすべて実寸基準 ptもpxも同じ基準
【結論】
実はWeb（HTML/CSS）では、ピクセル pxを使った指定は画面上の1画素（ドット＝物理ピクセル）を表しておらず、現実の長さの単位（物理単位）でしかない。
つまり、ポイント（pt）とピクセル（px）は単位系が異なるだけで、基準は同じ。
Web標準で「1px = 0.75pt」と明確に規定されている。
大半のブラウザでは、フォントサイズがデフォルトで16pxだが、これをptに換算すると12ptになる。
そのため、どちらを設定しても結局は同じことなので、デザイナーや開発者は好きなほうを選べばいい。
ただし、基準はあくまで現実の物理的な長さの単位。
それを以下で、順を追って解説する。
本来のポイントという単位
元々は出版・印刷業界の用語で、しかも複数の定義があってすでにわかりづらいが、現在の主流はデスクトップパブリッシング（DeskTop Publishing：DTP）の世界でいう「DTPポイント」が主流。
この定義では「1pt = 72分の1インチ」（1/72 in）と定められており、イメージとは異なり、文字（フォント）だけでなく余白などの指定のためにも使う“長さ”の単位のことだ。
出版界のdpi
dpiとはdot per inchの略で、1インチあたりの解像度（分解能）を表す。
同じサイズの印刷用紙であっても、プリンターが高dpiならばそれだけ精緻な印刷が可能になるということだ。
この場合は「dpi＝現実の物理的な解像度」なのでわかりやすいだろう。
ITでの問題点
しかしこれを、そのままITの分野に持ってくると面倒なことになる。
ユーザーの環境、つまり仕様端末やOSによって、ディスプレイのサイズと解像度が異なるためだ。
ディスプレイの解像度は本来、画面の対角線の長さから求めるが、話を単純化するためにここでは垂直方向のピクセル数を考えてみよう。
たとえば20インチでフルHD（1920×1080）のPCディスプレイの場合、垂直方向1080/20で1インチあたり54pxとなる。
DTPポイントを基準にすると72pt = 1インチ = 54pxだが、これがもし25インチだとすると1080/25で「43.2px」となってしまう。
サイズが同じであっても、もし解像度が4Kだったら、2倍なので「108px」だ。
つまり、現実の長さを基準にすると、ディスプレイのサイズと解像度によって実際のピクセル数に差が出てしまう。
しかも、スマートフォンの場合、ディスプレイ自体が多種多様で、しかもiPhone/iPadなどのRetinaディスプレイのように、表向きの解像度と実際のディスプレイ解像度が異なる場合が多々あるのだから、余計にややこしい。
ハードウェアのdpi
ディスプレイの性能を示す解像度の計算は、上記のとおり本来は画面の対角線の長さから求める。
これは、そもそも画面サイズの「～インチ」という表記がその対角線の長さを示すからだ。
よって、ハードウェアのdpiも基本的に印刷業界と同じ物理的な解像度に基づいている。
OSのdpi
ややこしくなってくるのは、ここから。
OSやソフトウェアなどで示されるdpiは、かならずしもハードウェアのそれと一致しているわけではない。
システムが見た目の調整などのために、独自の計算をしていることがあるためだ。
そのため、こうした場合のピクセルを物理ピクセルとは別に、相対的なピクセルということで「参照ピクセル」と呼ぶこともある。
実は、ブラウザもそのひとつだ。
CSSのピクセルやポイント：注意！「基準はあくまで現実の長さの単位」
おそらく、この点で一番多く勘違いされているのは「CSSでのpx指定は、画面の物理ピクセルに対応している」というものだろう。
実は、まったく違う。
CSSにおけるサイズ（長さ）の基準は、あくまで物理的な長さの単位だ。
つまり、ドット絵やペイントツールのようなピクセル基準ではない。
この辺はCSSのWeb標準で明確に規定されている。
これによると、CSSの長さの基準は次のようになる。
in（インチ） ：1インチ＝2.54センチメートル
pt（ポイント）：1ポイント＝1/72インチ
そのため、あまり使われないが、cm/mmといったメートル法でおなじみの単位もCSSでは使える。
要は「ピクセル数が〇〇」といったドット絵的な話ではなく、ブラウザのBlinkなどレンダリングエンジンがCSSの指定とディスプレイサイズ・解像度、OSの設定などから、その大きさに合うように計算して表示しているのだ。
実際の表示におけるピクセル数は、その結果でしかない。
CSSの規定のまとめ
CSSの実行環境のために、これらの寸法は次のいずれかの方法によって固定される。
(i) 物理的な単位を物理的な長さと関連づける
(ii) ピクセル単位を「参照ピクセル」と関連づける
ここでいう参照ピクセル（reference pixel）とは、実際の物理ピクセル（＝ドット）ではなく相対的なピクセル数のこと。
なぜこのような指定に？
理由にについても、W3Cの勧告に明記されている。
（環境が）96dpiだという思い込みに基づいた既存のコンテンツが多すぎ、それ（間違った思い込み）がコンテンツ（のレイアウト）を崩すのをやめさせるため
確かに「パソコンは96dpi」というイメージは根強い。
スマートフォンにいたっては、OSが同じであったとしても画面サイズと解像度はまちまちだから、CSSの考え方は正しかったといえるだろう。
CSSデザインの話：Webではpt/pxのどちらをつかえばいいのか？
よくCSS（スタイルシート）の基本的なことで話に出るのが、「フォントのサイズ指定をポイント ptでするか、ピクセル pxでするか」というものだ。
上記のとおり、結局は物理的なサイズを基準にしているので、これの結論としては「どちらでもいい」ということになる。
ただ、そもそもCSSの指定で、あちらこちらでpt/pxを使うことはあまりないだろう。
スタイルシートでfont-sizeプロパティなどにpt/pxなどで直接値を設定することを絶対指定というが、これだと基本的にひとつひとつの要素ごとに指定しなければならず、そもそも実作業としてあまりにも面倒だ。
しかも「本文は14pt」といったように全体の基準を変更した場合、デザイン上、それに応じてすべてを書き直さなければならないことが多く、実用上の問題点が多い。
解決策：相対指定 rem/em/%を使う
remはhtml要素の、emは親要素のフォントサイズを「1」（1.0）として基準にするサイズの相対指定で、フォントサイズ以外にも使える。
ただ、あくまでフォントサイズ（font-size）で指定されている値が基準なので注意しよう。
例えば、html要素のfont-sizeプロパティが16pxならば、CSSの他の部分でremを指定した場合、対象がフォントサイズでなくてもこの16pxが基準になる。
一方、%は指定するプロパティによって意味が異なるが、フォントサイズに関してはemとほぼ同じで、親要素の値を100%とするか1emとするかで単位指定が異なるだけだ。
[blogcard url="http://site.oukasei.com/?p=2207″]
CSSのまとめ
CSSの長さの単位、特にピクセルの扱いはややこしい。
それもこれも、「ピクセル＝画面のドット」というイメージが強いためだろう。
ただし実際のところ、Webにおける長さの指定は単純。
「実はCSSでも物理的な長さが基準」（＝ドットバイドット dot by dotでは指定できない）ということさえ覚えておけば、そもそもあまり気にするようなことでもないようだ。
全体のまとめ：ピクセルとは
要するに、解像度の単位を示すピクセルには、ディスプレイや印刷などの物理的なピクセル（物理ピクセル・絶対ピクセル）と、ソフトウェア分野における概念や単なる長さの基準としての相対的なピクセル（参照ピクセル・相対ピクセル）の2つが存在するということ。
そして、この2つはかならずしも一致しないということ。
これらさえ覚えておけば間違いはないだろう。
補足
Androidなどにおけるスマホアプリの開発環境では別の基準になるが、それはまた別の話。