How to teach the browser to understand the "dp" unit??

T

tr0fa2015-12-08 21:39:12

css

tr0fa, 2015-12-08 21:39:12

When I began to study material design, the question arose of how to teach the browser to understand such a unit of measurement as "dp". Let me clarify a little: I mean, how can I make the browser transform dp from CSS, say, into px.
Google gives a simple formula: dp = (width in pixels * 160) / screen density, where
screen density = screen width (or height) in pixels / screen width (or height) in inches
It seems to be nothing complicated, and all sizes can be obtained normally js. But here's how to substitute this in the style file, I don't understand. That is, if I write in the CSS file: button { width: 32dp; }, JS calculates dp for my screen and replaces 32dp with 180px for example. Thanks in advance.

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

P

Pavel Radkov, 2015-12-08
@tr0fa

For the browser 1px = 1dp, if the <head>page is written

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Those. the browser uses css pixels - these are the same "dp" - which are converted to device pixels on screens: 1 css pixel can equal 2 screen pixels when the site is displayed on the screen at double density (multiplier @2x), etc.
I have no idea what problem you are trying to solve. But it seems to me that you are creating a problem on the contrary. I see no reason to be tied to the ppi of the device, unless you are doing a "screen ruler".
"Dp" and the recalculation formula are intended more for designers who draw bitmap images for websites and applications. But if you're using svg, then you won't have any problems. Make svg with @1x multiplier and everything will scale correctly in the browser.

L

L0k1, 2015-12-08
@L0k1

I don’t know why you need to use a unit of measure in css, which is not there ?! - oh well,
you can use the preprocessor and drive it all into a mixin

A

Alexey, 2015-12-09
@dzheka3d

Have you tried using vh and vw units?