Webサイトretinaディスプレイのcss

Webサイトを作るときにretinaについていまいちわかりません。

ネットで調べたのですがよくわかりませんでした。以下の確認と質問があります。

確認１
通常のディスプレイに比べて細かく表示できる、だから幅が300pxの画像を表示しようとすると、600pxに引き伸ばされるため300pxの画像を綺麗に表示させるために600pxの画像を用意しないといけない。

確認２
「デザインはiphoneXの場合375px の２倍の750pxでデザインする」とサイトに書かれていました。750pxでデザインを作成する意図は画像の解像度に合わせるという認識であってますか？
もしそうだとしたらコーディングををするときデザインからフォントサイズや要素の幅や高さを自分で計算しないといけない。

質問１
Retinaの対応としては画像だけでいいのでしょうか？フォントなどは綺麗に表示されるだけで、大きさは変わらないということであっていますか？


よろしくお願いいたします。

No.1 ベストアンサー 回答者： goold-man 回答日時： 2020/02/25 13:23

1）「デバイス上でのRetinaディスプレイ」

Retinaディスプレイの魅力は、解像度の高さにありますが、コントラストやカラーなどの表現力にも優れています。
Retinaディスプレイは高解像度のため、すべてのアイコンがこれまでの約4倍の大きさに設定される。
解像度が高くなると画面が美しく感じられる。（「画素数（dpi）」と「画像のサイズ」）
画素数が高ければ高いほど画素が小さくなるため美しく表示される。
Retinaディスプレイは、2px × 2pxを擬似的に1pxとして表示するから、通常のディスプレイに比べて2倍細かく表示でき、繊細で美しい表示が可能になっている。
疑似的なピクセルCSSピクセル（論理ピクセル）

2）「Webで使用する画像のRetinaディスプレイ」
ぼける場合もある。
ブラウザ上に、「300px × 200px（width = 300px; height = 200px;）」の画像を、通常のディスプレイに表示する場合、単純にそのままの画面解像度（画像のピクセル数）の300px × 200pxですが、Retinaディスプレイに表示する場合、300px × 200pxを2倍した画面解像度（画像のピクセル数）の、600px × 400pxの画像が必要になり、Retinaディスプレイのブラウザ上で、「300px × 200px（width = 300px; height = 200px;）」の画像を表示させたいのを、そのまま300px × 200pxの画像を指定すると、実際には600px × 400pxの領域に、300px × 200pxが引き伸ばされて表示されるので、画像がぼけてしまいます。

但し、Retinaディスプレイよりも高解像度でハイコントラストのディスプレイは数多く存在します。
例：WQHD+の液晶ディスプレイや4Kテレビなどは、Retinaディスプレイを超える高解像度を誇っています。
https://d-fount.com/about-resolution/