最近、フロントエンドの UI を作っています。最初は簡単なことだと思っていましたが、結局 1 日かかりました。その中で最も困ったのは、PS でキャンバスのサイズを設定する際に十分な調査をしていなかったことです。同僚の話を誤解してサイズの意味を間違え、UI を完成させてからサイズが一周小さくなっていることに気づきました😂どうしよう？やり直しましょう〜
したがって、後で見直すために記録しておきます。
物理サイズ#
インチ#
インチ（inch）はデバイスのサイズを測るための一般的な単位です。
これは画面の対角線の長さを表します。
1 インチ≈2.54cm
解像度#
ピクセル#
ピクセルは画面の最小単位であり、すべての画像は無数のピクセルで構成されています。
ピクセルはサイズを測るために使用され、ピクセルとサイズは比例します。
画面解像度#
解像度は、垂直および水平方向のピクセル数を指します。例：
1080*1920
具体的なデバイスの画面のピクセルサイズを指します。一般的に、私たちが言うスマートフォンやコンピュータなどの物理デバイスの解像度は、画面の解像度を指します。
画面の解像度が高いほど、画面がより鮮明になるわけではありません。これはデバイスの物理サイズに依存します。つまり、解像度は鮮明度を表すために物理サイズと組み合わせる必要があります。なぜなら、それは画面が収容できる総ピクセル数を直接表現するからです。デバイスの物理サイズが異なる場合、解像度を比較することはあまり意味がありません。もちろん、ここでのピクセルは物理ピクセルを指すはずです。この点については後で説明します。
覚えておくべきことは、画面の解像度 / デバイス独立ピクセル（論理ピクセル）= 倍率（デバイスピクセル比）という結果が鮮明度を真に定義することです
画像解像度#
画像に含まれるピクセル数を指し、垂直および水平方向のピクセル数を表します。
画面の解像度の定義とほぼ同じですが、1 つは画面を定義し、もう 1 つは画像を定義します。同じサイズの場合、解像度が高いほど画像がより鮮明になります。
PPI（Pixel per Inch）#
1 インチあたりのピクセル数で、画面のクオリティを表すために使用されます。
PPI が高いほど、画像の品質が高くなります。
ここで注意するのは、設計時には通常次のように合意されることです。
スマートフォンの画面は 72PPI、ポスターは 300PPI を使用します
PPI が 300 以上になると、リアルな感覚を与えると言われています。したがって、ポスターの PPI はこの値に達する必要があります。一方、スマートフォンの画面のPPIが設定されていると、読み込みが遅くなり、カクカクする現象が発生する場合があります。通常、72PPIで十分です。
PPI の計算式
DPI（Dot per Inch）
1 インチあたりのドット数を表します。画面のピクセル、画像のピクセル、またはプリンターのインクドットのいずれかです。
画像と画面を説明する際には、DPI と PPI は同等と見なすことができます。
プリンターを使用する場合、プリントドットは規則正しく配置されていないため、プリントドット間には隙間があります。そのため、DPIはプリントドットの密度とも呼ばれます。
プリンターの DPI が高いほど、印刷される画像の精度が高くなり、インクの消費量と印刷時間も長くなります。
論理ピクセルと物理ピクセル#
これまで見てきたピクセルはすべて実際のピクセルであり、物理ピクセルです。
しかし、技術の進歩に伴い、論理ピクセルという概念が登場しました。これは、複数の物理ピクセルで構成される論理的なピクセルです。
これは、ジョブズがIphone4の発表会で初めて提案した視力ディスプレイ（Retina Display）です。
直感的な比較の 1 つは、3 つの物理ピクセルで構成される論理ピクセル（仮に 1 つの論理ピクセルが 3 つの物理ピクセルで構成されると仮定する）で構成される解像度が 1080*1920 の画像と、物理ピクセルで構成される解像度が1080*1920の画像です。同じピクセルの総量の前提の下で、前者の画像サイズは後者の 3 倍です。この 3 倍のサイズの画像を 1 倍の画像に圧縮すると、解像度が急激に向上します。
デバイス独立ピクセル#
デバイス独立ピクセルは、デバイスの元のサイズを指します。ここでのピクセルは論理ピクセルです。
Chromeの開発者ツールを開くと、さまざまな携帯電話モデルの表示状況をシミュレートできます。各モデルにはサイズが表示されます。たとえば、iPhone Xの表示サイズは375x812ですが、実際のiPhone Xの解像度ははるかに高いです。ここに表示されるのはデバイス独立ピクセルです。
デバイスピクセル比 DPR#
device pixel ratioの略で、DIPまたはDPとも呼ばれ、デバイスの物理ピクセルと論理ピクセルの比率を指します。倍率とも呼ばれます。
開発の問題#
モバイル#
iOSのサイズ単位はpt、Androidのサイズ単位はdpですが、React Nativeでは明示的な単位は指定されていません。実際には、すべてのデバイス独立ピクセルdp（Device Pixel）です。
WEB#
CSS ピクセルはデバイス独立ピクセル（論理ピクセル）を使用します。
UI の準備図を作成する際には、画面の品質（2 倍画面または 3 倍画面）に基づいて 2 倍および 3 倍のピクセルサイズで描画します。
CSS を書く際には、最もよく使用される単位はpx、つまりCSSピクセルです。ページの拡大縮小比率が100％の場合、1 つの CSS ピクセルは 1 つのデバイス独立ピクセルに等しいです。
ただし、CSS ピクセルは簡単に変更される可能性があります。ユーザーがブラウザを拡大すると、CSS ピクセルが拡大され、1 つの CSS ピクセルがより多くの物理ピクセルを横断することになります。
ページの縮尺係数 = CSS ピクセル / デバイス独立ピクセル
画面の問題#
私たちは通常、P と K を使用して画面の品質を評価します。
P は画面の縦方向のピクセル数を表します
1080P は画面の縦方向に 1080 ピクセルがあることを意味します。
K は画面の横方向のピクセル数を表します
K は画面の横方向にいくつかの 1024 ピクセルがあることを意味します。ピクセルが 4096 を超える場合、一般的に 4K スクリーンと呼ばれます。