正しい答えは1つではなく、実際には2つあります。
- Googleの推奨(例:マテリアルデザインのUdacityコース):単純な変換を使用します。多くの場合、ポリマーライブラリと同じように1:1です。これは、右の網膜ディスプレイ用ではありません例えば、そうではなく、1:1、公式マテリアルデザインガイドにデバイステーブルに用意密度比使用(一部の一般的なデバイスのための比率や、特定のメトリックを持つテーブルを)し、適した@mediaクエリを提供します 1dpがmdpiディスプレイの1px(160dpi / ppi)と等しいと仮定した場合の解像度のしきい値とアセット。
注:全体的なアイデア:ページの下部:複数の画面解像度のしきい値の比率を視覚化するための画像を使用した画像スケーリング(ブレークポイント画像)
- 特定のデバイスの設計全体で超一貫性が必要な場合は、さらに多くの調査と計算を行う必要があり、さらに重要なのは、必要な数のデバイスをサポートし、フォールバックを提供するために、より多くの@mediaクエリの山を作ることですあなたがそんなに気にしないもののために1位で言及された方法)。
トピックの詳細を確認したい方のための詳細情報を以下に示しますが、これは説明とロジックの背後にあります。上記は完全な答えです。
マテリアルデザインの公式ガイド(レイアウト>単位と寸法)によると、「ピクセル密度」は次のとおりです。
1インチに収まるピクセル数。
したがって、基本的にピクセル密度はppi値の新しい名前です。多くの人はこれを別の値、dpi値として認識しないためです。
同じガイドによる1dpの定義:
dpは、密度160の画面上の1物理ピクセルに相当します。dpを計算するには:
dp =(ピクセル単位の幅* 160)/画面密度
CSSを記述するときは、dpまたはspが指定されている場合は常にpxを使用します。Dpは、Android用の開発でのみ使用する必要があります。
マテリアルデザインの中核となる原則は、異なるプラットフォーム間で一貫した物理的寸法を維持することです。これにより、デスクトップ解像度、ppi(/ dpi)およびcssピクセルの問題が生じます。この場合、Androidの場合と同様にdpの計算に固執する必要がありますデバイス、およびほとんどの画面が96ppi(CSSにとって重要な前提条件)であるというのは事実ではなく、それらの大部分は少し高いppiを持ち、従来のデスクトップだけでなく通常のラップトップも考慮すると、またはタブレット、またはSurfaceのような「コンバーチブル」には、変換の必要性があります。通常は100〜130ppiの範囲で、現在使用しているのは127ppiです。
100%= 160ppi->物理的な1ピクセル幅= 1dp- > 長方形100x100px = 100x100dp
79%= 127ppi->物理的な1ピクセル幅= 約 0,8dp- > 長方形100x100px = 80x80dp
dpはAndroid専用の純粋で新しいユニットですが、dpに含まれるMDレイアウトを適合させるためにいくつかの計算を行う必要があります。特定の要素が物理的な意味でどのくらい大きくなるかをさらに知りたい場合、質問の目的に最も役立つのは、特定のデバイスの材料設計ガイドラインの理想的なタッチサイズの範囲の値です** dp値の下にあります物理的なもの。** dp値は変更されますが、物理的性質は変わりません。
単位を計算する必要がある問題は、Android APIガイド(dp単位からピクセル単位への変換)でさらに説明されており、CSSでスタイル設定された要素にも適用されます。
場合によっては、寸法をdpで表現してから、ピクセルに変換する必要があります。
ユーザーの指が少なくとも16ピクセル移動した後に、スクロールまたはフリングジェスチャが認識されるアプリケーションを想像してください。ベースライン画面では、ユーザーは16ピクセル/ 160 dpiで移動する必要があります。これは、ジェスチャが認識される前に1/10インチ(または2.5 mm)に相当します。高密度ディスプレイ(240dpi)を搭載したデバイスでは、ユーザーは16ピクセル/ 240 dpi(1/15インチ(1.7 mm)に相当)だけ移動する必要があります。距離ははるかに短いため、アプリケーションはユーザーにより敏感に見えます。
前述のポリマー変換1:1は、おそらく96dpiの密度、または私が与えた密度でさえ、低密度または(96dpiの場合のように)それよりも低いグループにあるという事実によるものです。dp値が受け入れられるcssではないことを考慮すると、単純化と複数サイズに使用する必要がある密度比(低、1,0中などの場合は0,75-)を想定する方が簡単です。前述のMaterial Designのデバイステーブルに表示される画面サポート。Android APIガイドの上記の章で引用されているベストプラクティスの1つとしても言及されています。そして、多くのデバイスがレベル1の密度比を持っているため、ポリマー変換1:1が適している場合があります。
最後のジレンマに戻ると、異なるデバイスの微妙なニュアンスに飛び込むことにした場合のcss px。あなたがそれほど質問していない場合は、MDテーブルの密度比をそのまま使用してください。しかし、もしあなたが完璧主義者なら、このCSSピクセルと物理的寸法の関係の核心はW3C候補勧告で完璧な(そして非常に簡単な説明)を持っています:
絶対的な長さの単位は、互いに対して固定され、いくつかの物理的測定に固定されています。これらは主に、出力環境がわかっている場合に役立ちます。絶対単位は、物理単位(「in」、「cm」、「mm」、「pt」、「pc」、「q」)および視覚角度単位(「px」)で構成されます。
したがって、腕の長さで読み取る場合、1pxは約0.26 mm(1/96インチ)に相当します。
注:ピクセル単位と物理単位のこの定義は、以前のバージョンのCSSとは異なることに注意してください。特に、CSSの以前のバージョンでは、ピクセル単位と物理単位は一定の比率で関連付けられていませんでした。物理単位は常に物理測定値に関連付けられていましたが、ピクセル単位は参照ピクセルに最も近く一致するように変化していました。(既存のコンテンツが多すぎると96dpiの仮定に依存し、その仮定を破るとコンテンツが壊れるので、この変更が行われました。)
この新しいpxの定義(物理的寸法を考慮に入れて)は、CSSピクセルとdpsの間のギャップを埋め、単純な測定計算を使用して、いわゆる出力環境を保証します。)MDレイアウト、異なるデバイスおよびプラットフォーム間で同じままです。さらに、W3CおよびMDガイドラインはどちらも低解像度および高解像度のデバイス画像を使用して、ピクセル/ドットカバレッジのコアアイデアを示しています。つまり、RetinaディスプレイのCSSクエリで広く使用されているものは、Material Designとすべてのモバイルデバイスに提供する必要のある(ただしより多くのしきい値を使用する)ものと同じです。
結論として、Googleが推奨するベストプラクティスであるMD密度比を使用するか、精度に固執している場合、またはデザインが物理サイズに関して完全に一貫している必要がある場合:特定または共通のppi / dpi値を使用した正確な変換を使用しますデバイス(かなり異常)、最初にMDガイドで提案されている一般的なしきい値と、比率と関連する表示タイプ名(xlarge、mediumなど)の分割ルールを尊重するため、Google resizerオンラインツールで簡単にテストできるもの)実装されています。
そのため、参照dpのピクセルサイズはmdpi解像度(160)のためであり、うまくいくことを思い出して、表のMD比に固執してください。
em/rem
どこでもs を使用することを選択し、各解像度の基本フォントサイズをスケーリングすることもできます。