Any difference between CSS pixels and DIPs?

Hi Campers,

Can please someone help me understand the concepts like CSS pixels and DIPs? I’ve searched a lot online, but the more I read, the more I got confused.

Are CSS pixels and DIPs the same thing? And when you write CSS pixels in your style sheet, how do you determine how many pixels are appropriate? Do you have to take DPR into account? Or you can just use the pixels you get from your designer’s mock-up?

Thanks for your help in advance!

1 Like

The simple answer is that DIP is not a valid CSS unit, so you never have to worry about them in web development.

A more complete answer is that DIP is an abstraction of the pixel unit. In CSS, you can specify size in pixels, and that tells the browser to make your div (or whatever) 200 pixels wide regardless of how many pixels there are per screen. If your display is only 800 pixels wide, that’d be 1/4 of the whole display width, so your div will look quite large. But this changes if you have more pixels. A 4k display is 2160 pixels wide, so now your div is only about 1/10 of the whole display, and so it looks much smaller. If you have two devices that are the same physical dimensions (let’s say, 12" x 8"), the div on your 800px screen will actually be about 2", while on the 4k display it will be 4/5 of an inch - much smaller! In CSS, the answer is to not use pixels and let the browser handle scaling, but other platforms like WPF and Android have their own ways of handling this, and one of them is to use DIP (or DP) units.

When you use DIPs, the system does some math for you, but the specifics differ between platforms. According to Wikipedia, Android defines 1 DIP to be 1 pixel @ 160dpi (dots per inch of screen). So, if you specify that a container element is 200 DIP wide, then on a 160dpi display it will be 200 pixels. On a 320dpi display, it will compute the size to be 400 pixels. WPF defines it as 1/96th of an inch, which is harder to think about, but it’s much bigger than the Android definition. Same idea, though. The result will be that the container object is the same size on every display.

1 Like