: What units to use in responsive design? 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

@Annie201

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.

Vote Up Vote Down

@LarsenBagley505

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: 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.

Vote Up Vote Down