開発者は、読んでいるすべての情報はあなたにとって重要です。私は最初のレスポンシブルデザインをデザインしていたときに同じコンセプトを見つけました。最新のiphoneは解像度幅が約1980であるフルサイズのHDモバイルで、1080ピクセルになる可能性があります。メディアクエリでmax-width: 768pxを使用しています。
あなたが言及したように、1/96インチに等しい公式のCSSピクセルがあります。つまり、メディアデバイスの1インチには96 cssピクセルがあります。あなたがこれらのCSSピクセルを参照しているメディアクエリを書くとき。 iPhoneの幅が3〜4インチの場合、300〜400 cssピクセル幅です。さて、CSSのピクセルだけがウェブデザインにとって重要なので、あなたはdp、dpi、ppiやディップのようなものを気にしないでください。しかし、あなたはそれらを知っていなければなりません。
cssピクセルは、論理ピクセルとも呼ばれます。他の種類のピクセルは物理ピクセルです。実際には、定義によるピクセルは、画面の最も小さな透明部分です。この最も小さな着色可能なセクションは、物理ピクセルと呼ばれます。 border: 1px solid redと設定すると、画面上に1論理ピクセル（1/96インチ）の幅が赤色で塗りつぶされます。今、この論理ピクセルは、その中に多くの物理ピクセルを有するかもしれない。 1つの論理ピクセル内に4つの物理ピクセルがある場合、と0.5 solid redを区別することができます。つまり、画面はより詳細な視覚的詳細を提供できます。
なぜ物理ピクセルを気にする必要がありますか？今日のスクリーンは、1つの論理ピクセル内のより多くの物理ピクセルである非常に高い解像度を有する。例えば。マックブックは約13インチの画面で約2560×1600の解像度を持ち、96dpiの通常のPCは1367×768フィジカルピクセル（19インチ）です。今度は、通常の19インチのPC上に幅1367 cssピクセルと高さ768 cssピクセルの画像を<img src="bla.jpg" width="680" height="380">としてレンダリングすると、イメージは実際のサイズの半分に縮小されます。ピクセルのすべてのペアは、私の画面上に1つにマージされます、つまり、私は画像の1pxごとに1pxの詳細を失ってしまいました。一方、幅680 cssピクセルと高さ380 css pxの画像をレンダリングすると、これらの画像はまったく同じに見えます。事実、私の画面は1/96インチ幅の細部のみを提供しています。一方、もし私がマックブックを持っていたなら、1367 css pxのワイドイメージは、マックブックがイメージを半分に潰してしまいますが、2ピクセルを1つにマージせず、0.5論理ピクセルのディテールも提供できるので、 1/96インチで2種類の色を表示できますか？いいですが、どのようにWebデザインにこの事実を使うことができますか？私たちができることは、より高い解像度の画像をratinaディスプレイに提供し、解像度の低い画像を通常のディスプレイに提供することです。これを行うには、以下を使用します。
device-pixel-ratioは、ディスプレイ上の1つの論理ピクセルで利用可能な物理ピクセルの数です。 dpiは同じことを意味します。実際にdpiとは、ディスプレイの1インチ内の物理的なピクセルを意味します。
ウェブ用の記事を書く場合は、CSSピクセルのみを気にする必要があります。他のすべてはデバイス（またはOS）によって処理されます。 –
@MikeMcCaughan IMOの物理ピクセルもWeb開発者にとって重要です。開発者は高解像度画像を高dpiの機器にのみ配信したいからです。 – user31782
これは実際に私が見つけた唯一のユースケースです：https://developers.google.com/web/fundamentals/design-and-ui/media/images – jorgeas80