There is no one right answer, there are actually two:
- Recommended by Google (e.g. in Udacity course on Material Design): Use a simple conversion, which in many cases is 1:1 just like in Polymer library. It's not right for retina display for example, so rather than 1:1, use a density ratio provided in the device table in the official Material Design Guide(table with ratios and specific metrics for some popular devices) and provide suitable @media queries for resolution thresholds and assets, assuming that 1dp is equal 1px for a mdpi display (160dpi/ppi).
Note: overall idea: on the bottom of the page: Image scaling with some picture to visualize the ratios for multiple screen resolution thresholds (Breakpoint picture)
- if you want an ultra consistency across your design for specific devices, you have to make some more research and calculation, and what's more important a pile of more @media queries in order to support as many devices as you want and provide fallback (with the method mentioned in the 1st place) for the ones you don't care so much.
Here is more detailed information for those wanting to dive into the topic more, but it's an explanation and logic behind, the above is a complete answer:
The thing is that "pixel density", according to Material Design's official guide (Layout > Units and measurements), is:
the number of pixels that fit into an inch.
So basically pixel density is a new name for a ppi value or since a lot of people do not recognize this as a separate thing, a dpi value.
Definition of 1dp according to the same guide:
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.
Core principal of Material design is to maintain consistent physical dimensions across different platforms, which raise the issue of the desktop resolution, ppi(/dpi) and the css pixel in which case you should stick with calculating the dp just like in case of the Android devices, and it's not true that most of the screens are 96ppi (it’s an assumption that is important for CSS), a great part of them has a bit higher ppi, and if you take into account not only traditional desktop but also a regular laptops, or the tablets, or the "convertibles" like Surface, there is a need for the conversion: they usually range from 100-130ppi, that said the one I’m using at the moment is 127ppi:
100% = 160ppi -> physical 1 pixel width = 1dp -> rectangle 100x100px = 100x100dp
79% = 127ppi -> physical 1 pixel width = ca. 0,8dp -> rectangle 100x100px = 80x80dp
Although dp is a pure and new unit just for Android, you should make some calculations in order to adapt the MD layouts which all come in dp. If you want to have some more idea how big will the specific element be in the physical sense the most useful for the purpose of the question is Ideal touch size range value in in Material Design guidelines for specific devices ** Below the dp value there is a physical one. **The dp value changes, but the physical stays the same.
The issue, why you need to calculate units, is further explained in Android API guide (Converting dp units to pixel units) and it still applies for elements styled with CSS:
In some cases, you will need to express dimensions in dp and then convert them >to pixels.
Imagine an application in which a scroll or fling gesture is recognized after the user's finger has moved by at least 16 pixels. On a baseline screen, a user's must move by 16 pixels / 160 dpi, which equals 1/10th of an inch (or 2.5 mm) before the gesture is recognized. On a device with a high-density display (240dpi), the user's must move by 16 pixels / 240 dpi, which equals 1/15th of an inch (or 1.7 mm). The distance is much shorter and the application thus appears more sensitive to the user.
The earlier mentioned Polymer conversion 1:1 is probably due to the fact that the density of 96dpi, or even the one that I gave is somewhere in low density or even (as in case of 96dpi) group, even below it. Taking into account that the dp value is not a css accepted, it's easier to assume that the density ratio (0,75- for low, 1,0 medium, and so on) is the one that should be used for simplification and multiple size screens support, which is shown in the device table for Material Design mentioned earlier. It's even mentioned as one the best practices in quoted above chapter of Android API guide. And that’s where Polymer conversion 1:1 might be good, since a lot of the devices have the density ratio at level 1.
Getting back to the last dilemma: the css px, if you decide to dive into subtle nuances of different devices. If you are a not so inquiring one, just stick with the Density ratio from the MD table. But if you are a perfectionist, this crux of CSS pixels and physical dimensions relation has a perfect (and pretty simple explanation) in a W3C Candidate Recomendation:
The absolute length units are fixed in relation to each other and anchored to some physical measurement. They are mainly useful when the output environment is known. The absolute units consist of the physical units (‘in’, ‘cm’, ‘mm’, ‘pt’, ‘pc’, ‘q’) and the visual angle unit (‘px’):
For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch).
Note: Note that this definition of the pixel unit and the physical units differs from previous versions of CSS. In particular, in previous versions of CSS the pixel unit and the physical units were not related by a fixed ratio: the physical units were always tied to their physical measurements while the pixel unit would vary to most closely match the reference pixel. (This change was made because too much existing content relies on the assumption of 96dpi, and breaking that assumption breaks the content.)
This new definition of px (taking into account the physical dimensions) fills the gap between CSS pixels and dps and lets us make sure that by using simple measurement calculations the so called output environment, which in this case is a consistent (in a physical sense) MD layout, stays the same across different devices and platforms. Moreover, both W3C and MD Guidelines use the low- and high-resolution device pictures to illustrate the core idea of pixel/dots coverage - more device pixels (dots) are needed to cover a 1px by 1px area on a high-resolution device than on a low-res one, which means that the widely used in CSS queries for retina display are indeed the same thing you have to provide (but with more thresholds) for Material Design and all mobile devices.
Concluding, either use the MD Density ratio which is best recommended practice by Google, or if you're fixated on precision or your design needs to be absolutely consistent about physical sizes: use the accurate conversion using ppi/dpi values of the specific or common devices (which is pretty insane), what you can easily test on Google resizer online tool since they respect the common thresholds suggested in MD Guide in the first place and division rules for the ratio and relevant display type names (xlarge, medium and so on) implemented in it.
So stick with the MD ratios from table remembering that the reference dp equal pixel size is for mdpi resolution (160) and you'll be good.