Search code examples
javascriptmaterial-designdpi

Doubts on some Rules to be followed for Google material design

I'm trying to use material design concept for web app. In Google docs they have mentioned some spacing rules in dp.

enter image description here

Measurements in the above image are in dp and sp. (Check here) scroll down in that docs till specs section for field and label spacing measurements. To follow these measurements I cant figure out how to calculate px value from dp. The dp formula as mentioned in google docs is 

dp = (width in pixels * 160) /  screen density

For formula

To use this formula I need Screen density. So Here is the question.

How do you calculate screen density from your web application?

Solution

  • From the Material Design Guildelines:

    When writing CSS, use px wherever dp or sp is stated. Dp only needs to be used in developing for Android.

    That means: You don't need to find out the screen density (which won't be easy to do anyway).