dp-spとPXの関係
Dp、spとpxの違いは何ですか？.
私はグーグルの新しい材料設計に基づいてウェブサイトを設計しています、すべての測定値はdp（グリッドの場合）とsp（テキストの場合）です。私の質問は、それらがどのようにピクセルに変換されるかです。私は4年以上ウェブサイトをデザインしており、すべての測定（グリッドとフォント）はピクセル単位です。
例えば：
- 見出しは24spですが、何ピクセルに相当しますか？ （それは24pxではありません、私はそれらを一致させようとしました、それはおよそ28pxですが、標準的な測定システムがなければなりません）。
- グリッドガイドライン：「すべてのコンポーネントは8 dpの正方形のベースライングリッドに揃えられます。」 -それは何ピクセルに相当しますか？
1px =？dp =？デスクトップまたは任意の平均的なモニターまたはモバイルデバイスのsp？
Android docs、 here and here ）にあるdpとspのGoogleの定義を読むことをお勧めします。
また、すばらしい Designer's Guide to DPI にも役立つ情報があります。
答えは次のようになると思います：
1px = 1dp = 1sp（平均的なモニターまたはモバイルデバイス）。
どうやってこれを思いついたのですか？
ピクセルはピクセルであるため、andriodのdpとspは、スケーリングする必要があるネイティブアプリに使用され、各画面のdpiはデバイスに基づいて異なるため、使用されます。デスクトップの場合、これらはすべて同じですが、もちろんWebサイトはモバイルデバイスと互換性/応答性がなければなりませんが、Webサイトはブラウザーで読み込まれるため、追加のメディア要求（ガイドラインに基づく）が機能します。
誰か他の論理的な結論がある場合は、共有してください
安全な経験則は、1 px = 1 dpを使用することです
これにより、ほぼすべてのデバイスで安全なサイズが得られます。一部のデバイス、特にiPad（レギュラー）では少し大きく表示されます。
理由は次のとおりです：
「dpは160 dpiでのピクセルの物理サイズに対応します」（ https://developer.Android.com/training/multiscreen/screendensities.html#TaskUseD ）
160 dpiとは：
160ドット= 1インチ
したがって：
160 dp = 1インチ（25.4 mm）
したがって、Googleがボタンのタッチ可能なターゲットの高さを48 dpにすることを推奨する場合、ボタンの高さは0.3インチ（7.6 mm）である必要があると述べています。
これは何ピクセルですか？まあ、それはデバイスに依存します。
48 dp（7.6 mm）ボタンの高さの例：
iPad mini：48ピクセル理由：iPadミニ画面の幅は約120 mmで、768 pxを使用してそのスペースを埋めます。したがって、1インチ（25.4 mm）を占めるには162 px、またはボタンの高さが7.6 mmの場合は48 pxが必要です。
Kindle Fire（7 "）：43ピクセル
Kindle Fire（6 "）：50ピクセル
iPhone：48ピクセル
Nexus 7：48ピクセル
通常のiPad：39ピクセル
（切り上げ/切り下げを少し変更した可能性があります。48より49の方が好きです！）
例として、画面のmmとCSS pxの幅：CSS pxの画面のサイズと対角線の長さを使用して画面の幅を計算しました。
- iPad mini：解像度1024 x 768、対角線201 mm =幅120 mm。
- Kindle Fire 7インチ：解像度858 x 533、対角線178 mm =幅94 mm。
- Kindle Fire 6 "：解像度853 x 533、対角152 mm =幅81 mm。
- iPhone：解像度568 x 320、対角102 mm =幅50 mm。
- Nexus 7：960 * 600の解像度、178 mmの対角線= 94 mmの幅。
- iPadレギュラー：解像度1024 x 768、対角246 mm =幅148 mm。
ボタンのpx高さを計算するには、デバイスのCSS px寸法を使用する必要があることに注意してください。これらの数値は、仕様に記載されている解像度と必ずしも同じではありません。