CSSのdp（密度に依存しないピクセル）単位とは何ですか？

Question 1

Androidの場合、UI要素にdp（密度に依存しないピクセル）測定値を使用することをお勧めし48dpます。ボタンの高さなどに使用するなどの規則があります。

私はWebアプリケーションに取り組んでいますが、UIデザインがAndroidのデザイン標準に準拠していないという批判が多く寄せられています。もちろん、Android Holoテーマの代わりにCSSとHTMLを使用しているため、私のアプリケーションは異なって見えるでしょうが、それでも可能な限り準拠させたいと思います。ただし、CSSでは密度に依存しない測定はできません。

さまざまな解像度とピクセル密度でアプリケーションをテストすると、見栄えが悪くなり、場合によっては、バランスが崩れて機能しなくなることもあります。CSSにはAndroidネイティブ開発のようなdpユニットがありませんが、いくつかの選択肢があるのではないかと思っていました。

Javascriptを使用してピクセル密度を取得し、すべてを手動で適切にスケーリングできますか？すべての解像度/密度で見栄えがよく機能するWebアプリを作成するための最良の方法は何ですか？

Question 2

http://www.w3.org/TR/css3-values/#lengths

CSSで使用できる最も近い単位は、ビューポートのパーセンテージの単位です。

vw-最初の包含ブロックの幅の1％に等しい。
vh-最初の包含ブロックの高さの1％に等しい。
vmin-vwまたはvhの小さい方に等しい。
vmax-vwまたはvhの大きい方に等しい。

これらのユニットをサポートしていないことを認識している唯一のモバイルブラウザはOperaです。 http://caniuse.com/#feat=viewport-units

Question 3

私は現在受け入れられている答えに同意しません。uber5001が示唆しているように、apxは固定単位であり、Android固有の取り組みと同様の精神を持っています。dpます。

パー材質の仕様：

CSSを作成するときは、dpまたはspが指定されている場合は常にpxを使用してください。Dpは、Android向けの開発でのみ使用する必要があります。

さらに

Web用に設計する場合は、dpをpx（ピクセル用）に置き換えます。

Question 4

を使用しremます。

これは、ルート要素のフォントサイズであり、他のUI要素のサイズに非常に適した基本単位です。

同じ絶対サイズ（センチメートル）を使用した場合、テキストやその他の要素は、モバイルでは大きすぎたり、デスクトップでは小さすぎたりします。

同じ量のピクセルを使用した場合、テキストやその他の要素はモバイルでは小さすぎたり、デスクトップでは大きすぎたりします。

remそれが言うので、ユニットはその場である「ねえ、これは通常のテキストはどうあるべきか大きいです。」これに基づいて他のUI要素のサイズを決定することは、かなり合理的な選択です。

Question 5

CSS3では、WebにAndroidがないという方が正確かもしれませんpx。CSS3の仕様は次のpxように述べています。

ピクセル; 1pxは1inの1/96に等しい

px 将来的には、必要な測定値になる可能性があります。

Question 6

CSS3の時点では、真にデバイスに依存しないCSSユニットはありません。絶対長についてはW3C仕様を参照してください。特に、絶対単位は物理的な測定値と一致しない場合があります。

物理単位がその目的に忠実である場合は、ポイントのようなものを使用できます。ポイントはdpsに十分近いです：

1 in = 72 pt
1 in = 160 dp

1 dp = 72 / 160 pt

SCSSを使用する場合は、ptsで返す関数を記述できます。

@function dp($_dp) {
  @return (72 / 160) * $_dp + pt;
}

そしてそれを使用してください：

.shadow-2 {
  height: dp(2);
}

Question 7

レムユニットに基づくインターフェースはどうですか？

確認するのに十分な経験はありませんが、ビューポートサイズに基づいて計算を行い、ルート要素にフォントサイズを適用すると、インターフェイス全体がそれに応じて調整されると思います。このようなものは、私にはまだ少し魔術です。

Question 8

ポイントを使用しないのはなぜですか。デバイス間で一貫したサイズです。そして、画面サイズに関連しています。それは伝統的な出版から来ているので、ほとんどはそれに精通していません。

Question 9

vw（任意のデバイスの画面の幅）とemを組み合わせて使用するのはどうですか？ここで、フォントサイズは、デバイスの画面幅に応じて動的に変化します。メインのCSSファイルで次のルールを使用します。

font-size: calc(100vw * 10 / 375);

（iPhone 6/7/8の幅は375pxです。320px（iPhone5）などに変更してください）

すべての場合において、それは完璧に機能します。マイナスは1つだけです。目標が「ピクセルパーフェクト」である場合は、ドットの後に大きな数字を使用する必要があります。

例：目標は、すべての画面でフォントサイズh5：18pxです。

次に、完璧な「日」は次のようになります。

h5 { 
 font-size: 1.79904em;
 }

完璧な使用なしで18/10：

h5 { 
 font-size: 1.8em;
 }

Google Chromeによると、18.0096pxを取得します。