So I am really at loss which units to adopt when developing responsive layouts. Some say use
viewport units. Other people say use
rem. Other say use media queries and pixel ratio. So what unit is the "right" one, speaking from experience and most bulletproof?
To optimize for mobile, you need to have a viewport configured in the meta tag.
This is what I use:
<meta name="viewport" content="width=device-width,initial-scale=1">
That way I'll have pixel units match CSS units when I specify units in pixels in CSS even for mobile.
The only units I use most often for maximum compatibility are:
px - The raw pixel unit. On a desktop, its the size of one tiny dot and takes about 1/(screen width)th of your screen width and 1/(screen height)th of your screen height.
em - I believe it stands for electronic measurement. Its relative to font size. I use it quite often to scale elements. There's more info here: http://www.w3.org/WAI/GL/css2em.htm
Then I do on occasion use percent unit. That means a percentage of the screen.
I'd recommend using the pixel unit only if you have to, such as when you're reserving a block of space for a special advertisement.
I don't bother with the new units because I like to maintain compatibility with all browsers, not just one.
If you carefully observe most of responsive design css, you will find % as prime unit for width,height,margin etc. For font-size, em is widely accepted. Additionally media queries is also important.