CSSのdp（密度非依存ピクセル）ユニットとは何ですか？
Androidの場合、ユーザーはUI要素にdp（密度非依存ピクセル）測定を使用することを推奨します。ボタンの高さに48dpを使用するなどの慣習があります。
私はWebアプリケーションに取り組んでいますが、UI設計に対してAndroid設計標準に準拠していないという批判が多く寄せられています。明らかに、私のアプリケーションは異なって見えるでしょうAndroid Holoテーマの代わりにCSSとHTMLを使用していますが、可能な限り準拠させたいと考えています。ただし、CSSは密度に依存しない測定を許可していません。
さまざまな解像度とピクセル密度でアプリケーションをテストすると、見た目がよくなく、場合によってはバランスが取れていないために機能しないこともあります。 CSSにはAndroidネイティブ開発のようなdpユニットがありませんが、いくつかの代替手段が何であるか疑問に思いました。
Javascriptを使用してピクセル密度を何らかの方法で取得し、すべてを適切に手動でスケーリングできますか？すべての解像度/密度で見栄えがよく機能するWebアプリを作成する最良の方法は何ですか？
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
現在受け入れられている答えに同意しません。 uber5001が示唆するように、pxは固定単位であり、Android特有のdpの努力と同様の精神です。
素材の仕様 ：
CSSを記述するときは、dpまたはspが記述されている場所では常にpxを使用します。 Dpは、Android用の開発でのみ使用する必要があります。
さらに
Web用に設計するときは、dpをpx（ピクセル用）に置き換えます。
CSS3では、ウェブにAndroidのpxがないと言う方が正確かもしれません。 CSS3のpxの仕様 はこう言っています：
ピクセル; 1pxは1inの1/96に等しい
将来、pxが必要な測定値になる可能性があります。
rem。を使用
これは、ルート要素のフォントサイズであり、他のUI要素のサイズの非常に優れた基本単位です。
同じ絶対サイズ（センチメートル単位）を使用すると、モバイルではテキストやその他の要素が大きすぎたり、デスクトップでは小さすぎたりします。
同じ量のピクセルを使用すると、モバイルではテキストやその他の要素が非常に小さくなり、デスクトップでは非常に大きくなります。
remユニットは、「おい、これは通常のテキストの大きさです」と言っているので、その場にあります。これに基づいて他のUI要素のサイズを設定することは、かなり合理的な選択です。
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);
}
レムユニットに基づいたインターフェースはどうですか？
確認するのに十分な経験はありませんが、ビューポートのサイズに基づいて数学を行い、ルート要素にフォントサイズを適用すると、インターフェイス全体がそれに応じて調整できると思います。このようなものはまだ私にとってちょっとした魔術です。
ポイントを使用しない理由は、デバイス間で一貫したサイズです。そして、画面サイズに相対的です。従来のパブリッシングに由来するため、ほとんどの人はそれに慣れていません。