携帯電話画面の CSS ピクセル幅を知るにはどうすればよいですか? _html/css_WEB-ITnose

モバイル デバイスのビューの急速な増加に伴い、レスポンシブ Web デザインの重要性がますます高まっています。 Web プログラマーは、モバイル ページを開発するときによくこの問題に遭遇します。モバイル デバイスのメーカーが宣言した画面のピクセル幅が、Web 開発で使用される CSS のピクセル幅と一致しないのはなぜでしょうか。

このピクセルはあのピクセルではありません

デバイス ピクセル:

デバイス ピクセルは物理的な概念であり、デバイスで使用される物理ピクセルを指します。たとえば、iPhone 5 の解像度は 640 x 1136px です。

CSS ピクセル (css ピクセル):

CSS ピクセルは Web プログラミングの概念であり、CSS スタイルのコードで使用される論理ピクセルを指します。 CSS 仕様では、長さの単位は絶対単位と相対単位の 2 つのカテゴリに分類できます。 px は相対単位、デバイス ピクセルは絶対単位です。

たとえば、iPhone 5 は Retina スクリーンを使用し、2px x 2px のデバイス ピクセルを使用して 1px x 1px の CSS ピクセルを表すため、デバイスのピクセル番号は 640 x 1136px となり、CSS の論理ピクセル番号は次のようになります。 320×568ピクセル。

デバイスのピクセルと CSS ピクセルの間の変換はどのように生成されますか?

これには、1 インチあたりのピクセル と デバイスのピクセル比 について話す必要があります。

インチあたりのピクセル数:

ppi、インチあたりのピクセル数を表します。値が大きいほど、ディスプレイで表示できる画像の密度が高くなります。 ppi の計算方法については、Wikipedia のピクセル/インチを参照してください。

デバイス ピクセル比 (デバイス ピクセル比):

上記の ppi の計算は、密度境界を取得し、デフォルトのスケーリング比を取得することです。ピクセル比。

上の図からわかるように、ppi が 120 ～ 160 の携帯電話は低密度の携帯電話に分類され、160 ～ 240 は中密度の携帯電話に分類され、240 ～ 320 は高密度の携帯電話に分類されます。 、320 を超えるものは超高密度として分類されます (Apple はこれに Retina という派手な名前を付けました)。

デバイスのピクセル比率を取得すると、デバイスのピクセルと CSS ピクセルの比率を知ることができます。比率が 1:1 の場合、1 つのデバイス ピクセルは 1 つの CSS ピクセルを表示するために使用されます。比率が 2:1 の場合、1 つの CSS ピクセルを表示するのに 4 つのデバイス ピクセルが使用されます。比率が 3:1 の場合、1 つの CSS ピクセルを表示するのに 9 (3*3) のデバイス ピクセルが使用されます。

アーティストと WEB フロントエンド開発者とのコラボレーション方法:

一般に、アーティストはデバイスのピクセルに基づいてデザイン ドラフトを作成します。フロントエンド プログラマは、変換とエンコードのために関連するデバイスのピクセル比を参照します。