ウェブ開発でdpを使用することについて質問があります。私は現在google material design guidelinesを読んでおり、彼らはdpに基づいて仰角と影を話しています。これをWeb開発でどうやって使うことができますか？ HTML CSSでdpに基づいてシャドウを作成する方法を計算する方法はありますか？dpを使ってシャドウを計算する方法 - ウェブ開発HTML CSS
Webページからの例：
上げるボタン
休止状態：
押された状態2DP：
：8DPデスクトップの場合のみ、ボタンはの標高を持つことができ引き上げ
休止状態：0dp
押圧状態：
2DP Google Material design documentsで述べたように：
DPはDPを計算するために160 の密度を有するスクリーン上の1つの物理ピクセルに等しい：
DP = （ピクセル単位の幅* 160）/画面の密度
CSSを書くときは、dpまたはspが指定されているところでpxを使用してください。 Dpは をAndroid用に開発するために使用する必要があります。
と画面密度は
画面解像度ディスプレイにおける総数画素を指します。
インチで
画面密度=ピクセル/画面幅（又は 高さ）における画面の幅（または高さ）は、画面の幅と高さに依存します。 Web上には各密度を計算するコンバータがいくつかあります。しかし、ほとんどのスクリーンはまだ72dpi（HDPIスクリーンは言及されていません）なので、これは適切な出発点です。
本当にデバイスに依存しないCSSユニットはありません。 http://www.w3.org/TR/css3-values/#absolute-lengthsを参照してください。特に、絶対単位が物理的測定値と一致しないことがあります。
物理ユニットが目的に合っていれば、ポイントのようなものを使うことができます。ポイントは、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);
}
材質の影について彼らは本当に要素の階層化方法を中継しようとすると、という概念dpのを実際に使用します。
すなわち
2dp < 8dp // 2 is layered under 8
// or
2dp (resting) => 8dp (focused)
彼らは何を参照しているZ深度（またはZ軸上）。これはCSSに直接変換することはできません。 高さのレベルについて話すとき、彼らはx & yまたは幅&高さの次元を指していません。 See design guide page on elevation.
ここでは、CSSシャドウの値を探しているだけです。 https://github.com/mrmlnc/material-shadows/blob/master/material-shadows.scss
これは、z値のdpをCSS値に変換するのと同じくらいです。 CSSの値はと一致しますが、Googleのポリマーの要素と一致します。
Good Luck！