I have question about using dp in web development. Im currently reading google material design guidelines and they are talking about elevation and shadows based on dp. How can I use this in web development? Is there any way to calculate this how to create shadow based on dp with HTML CSS?
Example from the web page:
Raised button
Resting state: 2dp
Pressed state: 8dp
For desktop only, raised buttons can have an elevation of:
Resting state: 0dp
Pressed state: 2dp
As mentioned in the Google Material design documents:
A dp is equal to one physical pixel on a screen with a density of 160. To calculate dp:
dp = (width in pixels * 160) / screen density
When writing CSS, use px wherever dp or sp is stated. Dp only needs to be used in developing for Android.
and screen density is
Screen resolution refers to the total number pixels in a display.
screen density = screen width (or height) in pixels / screen width (or height) in inches
So it depends on the screen width and height. There are some converters on the web to calculate for each density. But as most screens are still 72dpi (not mentioned the HDPI screens), I think that is a proper starting point.