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?

  • On StackOverflow: What's the preferred unit when doing responsive design? Feb 11, 2016 at 19:59
  • Depends on the designer/framework, some use PX, some use EM, Some use REM. All work... Feb 11, 2016 at 20:49
  • Use percent for base font size then ems for trickled/bubbled fonts and ratios, percents for margins and things, and px for breakpoints
    – dhaupin
    Feb 11, 2016 at 23:21
  • This question is off-topic here and belongs on Stackoverflow
    – Rob
    Feb 12, 2016 at 14:55

2 Answers 2


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, 2018 at 22:39

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 and acknowledge you have read our privacy policy.

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