Android DPとCSS pxの間で変換する方法は?


17

これはおそらく初心者の質問だと思いますが、それは本当に私を混乱させます。

私は、Google Material Designのドキュメントと、cssでのその実装の一部を読んでいます。仕様はAndroidで記述されていますがdp、CSSコードはpx長さの単位として使用します。

私を混乱させるのは、css実装が仕様から正確な値を使用することが多いことです。たとえば、トーストには次のものが必要です。

単一行のスナックバーの高さ:48 dpの高さ

最小幅:288 dp

2 dpの丸い角

対応するCSS

min-height: 48px;
min-width: 288px;
...
border-radius: 2px;

私の現在の理解では、Android DPは一般に160dpi画面で1ピクセルのサイズで表示されますが、CSS pxは視覚的な角度として定義されます。それで、ある距離で見pxdpときと同じことが起こるのでしょうか?その場合は、一般的なパターンを使用することであるpxとして、dpCSSで、またはCSSコードを、私は完全にやった誤解?

以前はAndroid開発について何も知らず、デザイナーも知りません。助けてくれてありがとう。


2
必要なのはデバイスの解像度に基づいたメディアクエリ、つまりcss-tricks.com/snippets/css/retina-display-media-queryで、デバイスのDPIに応じて、元のピクセル値を比率でスケーリングする必要があると思います各解像度ごと。em/remどこでもs を使用することを選択し、各解像度の基本フォントサイズをスケーリングすることもできます。
ドム14

CSSが使用する単位はpxだけではないことを付け加えてください。測定値は、さまざまな絶対長および相対長で記述できます。:このリンクを参照してくださいw3schools.com/cssref/css_units.asp
夏の

回答:


14

受け入れられたことは間違っていると思います。css pxは実際にはデバイスに依存しないピクセル(dip)であり、cssでpxをdpとして使用する一般的なパターンです。


7

あなたの質問に対する完全な答えはここにあると思います:

/programming/2025282/difference-between-px-dp-dip-and-sp-in-android

dpをpxに変換するには、アドレス指定する表示サイズを考慮する必要があります。DPIが大きいほど、同じ領域に詰め込んで見栄えを良くし、ピクセレーションを避ける必要があるピクセルが多くなります。

ldpi:1 dp = 0.75 px
mdpi:1 dp = 1 px
hdpi:1 dp = 1.5 px
xhdpi:1 dp = 2 px
xxhdpi:1 dp = 3 px
xxxhdpi:1 dp = 4 px

例えば:

CSSまたはPhotoshopの3x3 dpスクエアは次のとおりである必要があります。

2.25x2.25 px-ldpi
3x3 px-mdpi(Samsung ACE、Xperia X8)
6x6 px-xhdpi(Xperia S、Google Nexus 4)
9x9 px-xxhdpi(Samsung S4-S5、HTC One)
12x12 px-xxxhdpi(このレゾルチン次世代デバイスで使用されます)

上記に基づいて、XXHDPI画面に3x dp乗数を使用すると、計算は次のようになります。

min-height: 144px;
min-width: 864px;
...
border-radius: 6px;

Androidは、使用されているデバイスの解像度が低いことがわかると自動的に画像を縮小します。そのため、現在の市場のハイエンドデバイスの大部分に対処するため、XXHDPIを念頭に置いて開発しても安全です。

ここにあなたのための仕事をする簡単なコンバーターがあります:http : //androidpixels.net/


しかし、Androidのpxとcssのpxは違いませんか?
ピンイン14

ピクセルは、使用するソフトウェアや画面に関係なく、同じことを意味します。異なるデバイス上では大きなドットまたは小さなドットのように見えるかもしれませんが、それはそれらの画面が同じスペースに多少のピクセルを詰め込んでいる可能性があるためです(この用語はPPI-インチあたりのピクセルと呼ばれます)。E. Upvoter氏の回答を読むことをお勧めします。CSSの密度を事前に定義し、仕事を楽にするのに役立ちます。
マチュー14

3
pxはピクセルではありません。これは角度測定です:inamidst.com/stuff/notes/csspxこの答えは間違っています。
ジャクソン

4

W3C言う

したがって、pxユニットにより、デバイスの解像度を知る必要がなくなります。出力が96 dpi、100 dpi、220 dpi、または1800 dpiのいずれであっても、pxの整数として表される長さは常に適切に見え、すべてのデバイスで非常に似ています(...)

そしてそれは言うが:

pxの外観のアイデアを得るには、1990年代のCRTコンピューターモニターを想像してください。表示できる最小のドットは、約1/100インチ(0.25mm)以上です。pxユニットは、それらの画面ピクセルから名前を取得しました。

それはまた言う:

実際、CSSでは、すべての印刷出力で1pxが正確に1/96インチである必要があります(...)

デフォルトでは、画面デバイスは96dpiとして設定されていることを考慮すると、ブラウザーがCSSピクセルをどのように解釈するかについての最良の仮定です。

96 css-px = ~ 1 inch

そして、我々はAndroidでそれを知っています:

160 dp = ~ 1 inch

そう:

96 css-px = ~ 160 dp
css-px-length = round(dp-length * 96 / 160)

そして、それによると:

min-height: 29px;
min-width: 173px;
...
border-radius: 2px; /* 2dp is 1.2px from the formula but it wont work */

さて、Google PolymerのToastサイズを確認するまで、それは正しいと思いました。

  min-height: 48px;
  min-width: 288px;
  padding: 16px 24px 12px;
  box-sizing: border-box;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  border-radius: 2px;
  bottom: 12px;
  left: 12px;
  font-size: 14px;

つまり、1対1の変換であり、それからAndroidブラウザーが使用することがわかりました:

1 css-px = 1 dp

1インチあたり96 css-pxは、デスクトップやラップトップなどの他のデバイスで使用されます。

結論:cssピクセルはデバイスdpiから独立しており、Androidデバイスでは1 css-pxは1dpに等しくなります。


-1

正しい答えは1つではなく、実際には2つあります。

  1. Googleの推奨(例:マテリアルデザインのUdacityコース):単純な変換を使用します。多くの場合、ポリマーライブラリと同じように1:1です。これは、右の網膜ディスプレイ用ではありません例えば、そうではなく、1:1、公式マテリアルデザインガイドにデバイステーブルに用意密度比使用一部の一般的なデバイスのための比率や、特定のメトリックを持つテーブルをし、適した@mediaクエリを提供します 1dpがmdpiディスプレイの1px(160dpi / ppi)と等しいと仮定した場合の解像度のしきい値とアセット

注:全体的なアイデア:ページの下部:複数の画面解像度のしきい値の比率を視覚化するための画像を使用した画像スケーリング(ブレークポイント画像)

  1. 特定のデバイスの設計全体で超一貫性が必要な場合は、さらに多くの調査と計算を行う必要があり、さらに重要なのは、必要な数のデバイスをサポートし、フォールバックを提供するために、より多くの@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比に固執してください。


1
-1この答えのほとんどは不要であり、無関係です。
カイ

@maugo不要な部分を削除するために編集できる場合、CAIが彼のダウン票を削除し、アップ票を提供することさえあると確信しています。
DᴀʀᴛʜVᴀᴅᴇʀ

@ darth-vaderのヒントに感謝します。とにかく改善するものがあれば、コメントを歓迎します。そもそも長々と長い答えをして申し訳ありませんが、数学ではなく本当の問題だったので、論理のない答えはしたくありませんでした。
-Maugo
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.