デバイスピクセル vs CSSピクセル
「いろいろなピクセルさんたち」
画像のRetina対応についてググったり技術書を読んだりしてみると、
普段見慣れないピクセルさんたちが登場します。
「デバイスピクセル」
「ピクセル」は、隣接するものとは無関係にフルカラーを表示できるディスプレイ上の単一の物理的な「電球」です
コンピューターの画面には、コンテンツがピクセル単位で表示されます。この物理ピクセルは「デバイスピクセル」とも呼ばれます
【引用元：MDN Web Docs】https://developer.mozilla.org/ja/docs/Glossary/CSS_pixel
MDN Web Docsは、JavaScriptやHTML＆CSSの技術書の中で信用力が高いよ！と噂されています。
とりあえず、ピクセルの定義から教えてくれています。
以前、ピクセルは、「点」と習いました。
MDNさんは「電球」と言っていますw
色彩検定のテキストで、
「電球は、RGBの3色を調整して青白く光らせているんだよ！」って書いてありました。
同様にピクセルさんもRGBの3色をチカチカ光らせたり消したりして画像や文字を表示してくれています。
「電球」という表現は言いえて妙ですw
さらに、「単一の物理的な」と言っているので、
普段、私たちが電球を取り換える時に使う、「たった一個の電球」そのものだよ！ってことでしょうか。
また、画面には文字や画像がピクセル単位で表示されているようです。
つまり、画面に敷き詰められたピクセルさんたち一人ひとりが頑張ってくれているみたいです。
その一人ひとりのことを「物理ピクセル」と呼んでいます。
度々出てくる「物理」という難しげな言葉。
「物理的な電球」って言葉と対応させているのでしょうか。
どうやら、画面に敷き詰められた「本物の（物理的な）ピクセルさんたち一人ひとり」ってことのようです。
そして、その物理ピクセルのことを、「デバイスピクセル」と呼んでいます。
んー・・・どうやら、物理的ではないピクセルさんも登場してきそうな嫌な予感がします。
ということで、
デバイスピクセルさんとは、
単純に、画面に敷き詰められたピクセルさんたちのことって思ってよさそうです。
「物理的な」って言葉は、「工場で製造された」って言葉に言い換えてもいい感じです。
「工場で製造された」ってことは、実際に、物理的に、手で触れるように存在しているってことです。
ピクセルさんの大きさも、工場で製造された時点で決まった大きさに固定されます。
「CSSピクセル」
CSS で接尾辞であるpxとともに示されます
【引用元：MDN Web Docs】https://developer.mozilla.org/ja/docs/Glossary/CSS_pixel
普段、私たちがCSSファイルに書いているピクセルさんたちのことです。
人間の目で負担なく快適に見ることができるけれどなるべく小さい、1 ドットの高さや幅におおよそ一致する、長さの単位です
【引用元：MDN Web Docs】https://developer.mozilla.org/ja/docs/Glossary/CSS_pixel
人間の目で快適にみることができる・・・のでしょうか.?
ちょっと謎ですw
もしかしたら、
私たちが、見ている画像や文字はドットの集まりだけど、快適に見えてるでしょ？
それを拡大すると一番小さいドットが出てくるよね？
そのドットの単位だよ！
って言っているのかもしれません。
それと、ドットではなく、ピクセルではないのでしょうか？
ちょっと謎ですw
けど、後ほど定義という言葉を用いた上で、ピクセルさんのサイズって言っているので、
ドットでもピクセルさんでもどちらでもいいのでしょう。
文脈的に、ドット＝ピクセルさんと考えるんだよ！って言われてる気がします。
以前、勉強しましたが、ドットとピクセルさんは文脈的にイコールであることが多いのが実情のようです。
とりあえず、CSSピクセルさんは、「長さの単位」である認識が大事そうです。
定義によれば、これは閲覧者の目から腕の長さまで離れた位置での、画素密度 96DPI の単一ピクセルの物理的サイズです
【引用元：MDN Web Docs】https://developer.mozilla.org/ja/docs/Glossary/CSS_pixel
意味不明ですw
「閲覧者の目から腕の長さまで離れた位置」とは、
「パソコンやiphoneを見ている人の目と、手で操作しているパソコンやiphoneの画面までの距離」
を示しているようです。
デバイスと、それを使っている自分との間の距離ってことでしょうか。
人によって視力が違ったり、好みもあるので、この距離は人それぞれっぽいです。
要は、普通にパソコンや携帯を見るときの距離ってことです。
そして、解像度が96dpiの画面を前提としているようです・・・が、
いきなりそんな解像度の数値を言われてもピンときません。
謎です。
さらに、解像度96dpiのデバイスを前提としたときの、ピクセルさん一人分の物理的サイズと言っています。
また、「物理的」って言葉です。
文脈的に、
解像度96dpiのデバイスを前提としたときの、デバイスピクセルさん一人分のサイズなんでしょう。
もしも、「解像度96dpiのデバイスを前提としたときの」って言葉がなければ、
「デバイスピクセルさんのサイズ ＝ CSSピクセルさんのサイズ」
その比率は、「1 : 1」になります。
どうやら、この「解像度96dpi」というのに、CSSピクセルさんの秘密がありそうです。
解像度「96dpi」の前提について
長さの単位には、相対と絶対の2種類があります
【引用元：W3C】https://developer.mozilla.org/ja/docs/Glossary/CSS_pixel
CSS技術の設定をしている「W3C」さんのページです。
技術書の中でも信頼性が高い、と明言されています。
ここからけっこう難しく、長いお話になります。
結論だけ知っておけば特に問題はないように思います。
長さの単位は、大きく分けて、「相対単位」と「絶対単位」があるそうです。
相対長さの単位は、別の長さに対する相対的な長さを指定します
相対の長さ：em、ex、ch、rem、vw、vh、vmin、vmax【引用元：W3C】https://developer.mozilla.org/ja/docs/Glossary/CSS_pixel
remやvhなどはよく使われているので
相対的な長さについてはイメージできそうです。
絶対的な長さの単位は、互いに対して固定され、いくつかの物理的測定に。これらは主に、出力環境がわかっている場合に役立ちます
絶対単位は、物理単位（in、cm、mm、pt、pc、Q）と視野角単位（ピクセル単位）（px）で構成されます
【引用元：W3C】https://developer.mozilla.org/ja/docs/Glossary/CSS_pixel
ここでも物理という単語があります。
「in」は、インチを表します。
それぞれの単位を見てみると、私たちが日常で使っている単位を表しているようです。
ものさしで測れるような物理的な単位ってことでしょうか。
工場でデバイスピクセルさんたちを製造するときに使われてそうな単位。
絶対的な長さの単位もイメージできそうです。
絶対単位は、さらに「物理単位」と「視野角単位」に分かれるそうです。
視野角単位がよくわかりません。
視野角って言葉の意味すら釈然としませんw
ああ・・・ピクセルさんもそこに含まれてしまっています。
視野角とは、ディスプレイなどを斜めから見た場合に、どの位の角度まで画面を正常に見ることが可能かを示す指標のことである。
【引用元：IT用語辞典バイナリ】https://developer.mozilla.org/ja/docs/Glossary/CSS_pixel
視野角は、私たちがパソコンやiphoneを使う時に、どれぐらいまで離れていたら画面が正常に見えるか？を表す
指標のようです。
W3Cが、この視野角単位について言及しています。
基準画素とは、腕の長さのデバイスからの距離と96dpiのピクセル密度におけるデバイス上の1ピクセルとの視角である。
名目上の腕の長さが28インチの場合、視角は約0.0213度になります
距離をおいて読むために、1pxは約0.26mm（1/96インチ）に対応する。
【引用元：W3C】https://developer.mozilla.org/ja/docs/Glossary/CSS_pixel
「基準画素（基準ピクセル）」という新しいピクセルさんが登場しました。
「基準ピクセルさん」は、「視野角」を使って、いろいろ計算した結果出てきた、概念的なピクセルさんのようです。
私たちがデバイスを見る平均的な距離を考えた場合、
画像や文字がちゃんと見えるための1pxの長さは、約0.26mmであると言っています。
約0.26mmの長さは、
下記「絶対単位：他の単位との関係」を使って換算すると、
1/96インチに匹敵するようです。
1pxは、1インチを96分割した時の長さです。
つまり、1pxを96個並べたら、1インチになるみたいです。
96px = 1in
ここでは、ドット=ピクセルとしますが、
96dpi（1インチに敷き詰められた96個のドット）のデバイスで1pxを表示させると、
ぴったり1pxの大きさ（約0.026mm）になるということです。
MDNさんのお言葉も加味すると、
約0.26mmの長さは、
「解像度が96dpiのデバイスを使った時の、1pxの長さに相当する」
と言えます。
すべての絶対長さの単位は互換性があり、pxはそれらの正規の単位です
絶対単位
【引用元：W3C】https://developer.mozilla.org/ja/docs/Glossary/CSS_pixel
他の単位との関係：
1cm = （ 96 ÷ 2.54 ） px
1mm = （ 1 ÷ 10 ）cm
1pt = （ 1 ÷ 72 ）in
1in = 2.54cm = 96px
1px = （ 1 ÷ 96 ）in
一応、単位の理解のため、1pxが約0.26mmになるのか計算してみます。
1in = 96px
両辺を96pxで割ってあげます。
1in ÷ 96px = 1px
それを右辺左辺逆にして、
1px = 1in ÷ 96px
ここで、1in = 2.54cm
1px = 2.54cm ÷ 96px
1px = 0.02645…cm
ここで、1mm = （1 ÷ 10）cm
1px = 0.02645…cm × 10
1px = 0.2645…mm（約0.26mm）
確かに絶対単位は相互に互換しているようです。
下の画像は、参照ピクセルの大きさで距離を見ることの効果を示している：
71cm（28インチ）の読み取り距離では基準画素が0.26mmで、
【引用元：W3C】https://developer.mozilla.org/ja/docs/Glossary/CSS_pixel
3.5m（12フィート）では1.3mmの参照画素となる。
「下の画像」にはピクセルの大きさが書かれています。
私たちの目と、使用しているデバイスとの距離によって、ピクセルの大きさが違います。
平均的な腕の長さ:28インチの距離だと、基準ピクセルの長さが0.26mm。
さらに遠くで見る場合を想定すると、基準ピクセルの長さが1.3mmと大きくなるようです。
この大きくなった基準ピクセルのことを「参照ピクセル」と呼んでいます。
閲覧距離の増大に伴ってピクセルが大きくなる
【引用元：W3C】https://developer.mozilla.org/ja/docs/Glossary/CSS_pixel
このように、基準ピクセル（参照ピクセル）という概念を使えば、
1pxが、どの距離でデバイスを見ても快適に文字や画像を見ることができるような、ピクセルの大きさになるようです。
そのため、ピクセルさんの単位は、
絶対単位で普通に単独で使う単位ではあるけれど、
「視野角単位」っていう概念上の単位でもあるみたいです。
だから、絶対単位の中で、
定規で測れるような「物理単位」と
概念上の基準ピクセル（参照ピクセル）を念頭に考えられた「視野角単位」を区別しているようです。
絶対単位にはそれぞれ互換性があるので、
CSSピクセルの1pxは、「cm」にも「mm」にも「pt」にもなれるみたいです。
理論上は、CSSファイルでどれを使ってもよさそうな感じです。
CSSデバイスの場合、これらの大きさは次のいずれかに固定される。
物理的寸法に物理単位を関連付けること
参照ピクセルにピクセル単位を関連付けること【引用元：W3C】https://developer.mozilla.org/ja/docs/Glossary/CSS_pixel
フォントサイズを72ptにしたい場合、
CSSファイルに72pt（物理的寸法）と書く。
上記の物理単位で換算され（上記の物理探知を関連付けることで）、96px（= 72pt = 1in）になる。
96dpiのデバイスを前提とした時、96pxで表示される。
フォントサイズを72pxにしたい場合、
CSSファイルに72px（参照ピクセル）と書く。
上記のピクセル単位で換算され（上記のピクセル単位を関連付けることで）、
1px = 1/96 in
72px = 72 × 1/96 in
6912px = 72in
1in = 96px
96dpiのデバイスを前提とした時、96pxで表示される。
絶対単位の中で、お互いの単位の関係は崩れることはないので、
上記の例において、
CSSファイルに何ピクセルと書こうと、それに比例したピクセルが表示されることになる。
よって、
CSSピクセルとは、
96dpiのデバイスピクセルを1ピクセルとした仮定（解像度96dpiのデバイスを前提にした場合）に基づく論理ピクセルと捉えることができそうです。
上記の例を見る限り、
CSSピクセル=参照ピクセル
と思えるかもしれませんが、厳密には別物っぽいです。
参照ピクセルというピクセルを概念として、成立させて、
その論理を参考にしてできたピクセルが、「CSSピクセル」であると解釈したほうがよさそうです。
どやら、私たちがCSSファイルに入力したCSSピクセルさんの大きさは、
デバイスピクセルさんと同じ大きさにはならないで、
絶対単位というCSSのルールによって換算され、変わってしまうようです。
px（ピクセル）という単位は、デバイスによって長さ（大きさ）が変動する、ちょっと危ない単位であると認識しておいたほうがよさげです。
よく、相対単位を使いましょう！という記事を見かけますが、こういった仕組みがあるようです。
MDNさんから補足。
「快適に見ることができる」や「腕の長さ」などの不正確な用語は、人から人へと伝えるうちに変化してしまいます
そのため、一般的には「単位 pxを使うときに得られる値は、スクリーンの実際の画素密度に関係なく、スクリーンの 1 インチに 96px とほとんど等しくなる距離です。」と言えば事足ります
あるいは、「もしユーザーが画素密度 266DPI の電話を持っていて、そのスクリーン上に幅 96px の要素がある場合、その実際の幅は 266 device pixels だろう。」とも言えます
【引用元：MDN Web Docs】https://developer.mozilla.org/ja/docs/Glossary/CSS_pixel
人によって、パソコンやiphoneを見る距離は変わりますよ！って言っています。
私たちがCSSファイルに100pxって書くと、
絶対単位によって換算された大きさで表示されるよ！
私たちが使っているノートパソコンやiphoneのdpi（ここではppiと同じ意味）は関係ないよ！
って言っています。
CSSで、縦横96pxの正方形を作って、
226dpiの解像度のiphoneの画面に表示させたら、
画面に表示される正方形の縦横の幅は、226デバイスピクセルだよ！
って言っています。
試しに、CSSで縦横96pxの正方形を作り、基準ピクセルで換算してみます。
1px = 1in ÷ 96px
1px × 96px = (1in ÷ 96px）× 96px
96px = 1in
CSSで縦横96pxの正方形を書いたけど、
iphoneの画面で表示される大きさは、縦横1インチの正方形に換算されました。
ここで、iphoneの解像度は、226dpiでした。
1インチあたり、226ピクセルの密度です。
この226ピクセルは、デバイスピクセルのことです。
言い換えると
1インチあたり、226デバイスピクセルの密度ってことになりそうです。
解像度226ppiのiphoneの画面には、
縦横1インチあたり、226デバイスピクセルが詰まっています。
そこに先ほど計算した（絶対単位で換算した）縦横1インチの正方形が画面に表示されます。
1インチあたり、いくつデバイスピクセルさんがいるかわかりましたか？
その正方形の縦横1インチの幅は、226デバイスピクセルって言うことができそうです。
不幸なことに、ここで気づきますw
どのデバイスで表示させようが、
CSSに96pxの正方形を書くと、
デバイスの解像度（dpiとかppi）とは関係なく、
まずは、縦横1インチの正方形になるみたいです。
そして、その結果をもとにして、
1インチが、
デバイス毎の画面解像度に応じたデバイスピクセルの大きさで表示されるようです。
当然ですが、デバイスピクセルの大きさは、デバイス毎に異なります。
例えば、上記の縦横1インチの正方形が、
iphone（画面解像度320px×680px）で表示されると、小さく表示され、
パソコン（画面解像度3,840px×2,160px）で表示されると、大きく表示される。
実は、この点を理解するためにはまだ情報量が足りていないのですが、
だいたいのイメージはつきますでしょうか？
ここにRetinaディスプレイやOSの解像度などが絡んでくると余計に、大変ややこしいですw
とりあえず、まとめます。
CSSピクセルをCSSファイルに書くと、
すべて1インチに換算される。
その1インチが、
デバイスピクセルの大きさで表示される。
デバイスピクセルの大きさは、デバイス毎に異なるので、
文字の大きさが、
デバイスピクセル毎に異なったりする。
なので残念ながら、CSSファイルにCSSピクセルを書いても、
結局、デバイス毎の性能で表示されることになります。
このことを知っていても知らなくても、特段影響はない・・・ように思いますw
特筆しておくことは、px（ピクセル）って単位はあまり使わないほうがいいよ！ってことでしょうか。