Defining css width/heights in device independent units?

Question

I have a div and I'm trying to figure out how to get it to occupy the same amount of screen space regardless of device display density.

For example, let's say I have two devices that are each 5 inches wide. The first display has a device-pixel-ratio=1, and the second has a device-pixel-ratio=2.

Device 1: 5 inches wide, device-pixel-ratio=1
Device 2: 5 inches wide, device-pixel-ratio=2

So the second device has twice as many pixels packed into the same space.

My div style:

.myDivStyle {
    width: 100px;
    height: 50px;
}

If I understand correctly, Device 2 would appear to render the div at half the width/height as on Device 1.

If that's the case, is there a way to define our width/height in a device-independent unit? Or do we have to scale all our styles manually on page load etc after we examine the device-pixel-ratio attribute?

Thank you

Answer 1

Redefining your css size by using em unit would be good.

Some good links in this reference. Please check these

1. w3.org
2. w3.org
3. css-tricks

All the above links urge that, em is best suitable in cases when you want your document to behave well on wide range of devices.