3

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?

1

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.

  • I'm not sure what you mean by "raw pixel unit", but it sounds like you're referring to the physical device pixels, in which case this is incorrect. CSS pixels are reference pixels, and can be made up of 1, 1.5, 2, 3, etc. physical pixels. The em unit comes from typography, where it was traditionally equal to the width of the capital letter "M" in whatever typeface was being used. – bernk Oct 29 '18 at 22:39
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.