Jose Arteaga

Posted on Nov 25, 2019

%, px, em, rem, viewport...How to know which one to use in CSS for responsive design?

#discuss #beginners #webdev #css

I've been working on the FreeCodeCamp Responsive Design projects, and there has been one thing that I've struggled a lot designing responsive websites, and it's understanding whether I have to use pixels, EM, REM, percentages, Viewport, etc. for font sizes, images, containers, and media queries.

Do you have any recommendations on how to get a better understanding of it and overcome it?

I'd appreciate your help!

Thanks!

Top comments (12)

Austin S. Hemmelgarn • Nov 25 '19

All of them are usable interchangeably. In fact, you can even mix them in calc() calls and it will work correctly (a lot of CSS frameworks do this to properly account for padding and borders when computing sizes).

In general though:

Inches, points (1/72 of an inch, or roughly 0.353mm), millimeters, and centimeters should all be avoided unless you need to (try) and have a 'real size' or properly scaled image. In CSS, they get computed from pixel counts based on the pixel size of the display. The problem is that this is unreliable except for print media (printers pretty much always know their dot-pitch), as modern displays may have different pixel sizes in the horizontal and vertical axis, and many displays lie about their DPI/DPM.
Pixels should only be used when you need very thin lines (for example, borders) or are trying to set the exact size of an image to prevent it from getting scaled (though the second case doesn't work reliably, and should use one of the other physical units instead when dealing with print media (1px in print media for most CSS implementations is equal to 1pt). They aren't responsive, aren't consistent, and sometimes interfere with zoom functionality.
Viewport units should be used sparingly for things like overlays that need to scale only based on the size of the display. Even then, they're tricky to get right and can cause issues (if not used correctly, they will cause problems at non-default zoom levels). They also have a number of odd quirks that vary from browser to browser (for example, everything but Firefox implements 100vw incorrectly (they include the scrollbar width, but should not)). You almost never want to use them for things like font sizes, as they can exhibit some really unexpected behavior there for users (imagine the font size changing when the user resizes the browser window or switches into or out of full-screen mode).
Percentages should be used when you need to scale a property based on the value of the same property in the parent element (or what the computed value for that property is for the parent element). For example, controlling how big sidebars are in text, or helping set some default number of elements per row/column in a flexbox layout. Percentages technically work for font sizes, but I would advocate avoiding using them for that, as EM's and REM's work just as well and behave in a slightly more logical manner for most people.
EM's should be used when you need to scale a property off of the font size of the element (or the font size of it's parent if you're using them to set the element's font size). Usually this is just used for tweaking the font-size of small sections of text. An example use case would be the pages that some sites have with a big list of tags, with each tag's text size based on it's popularity. Many such sites use a single <span> element for each tag, and change the font-size of that using EM units.
REM's should be used for almost everything else. They work like EM units, but scale off of the font size of the document root element (so the <html> or <body> element in most cases), which means that they're consistent regardless of where they are being used in the hierarchy (IOW, 1rem is always the same size, no matter where it shows up in the hierarchy), and, as a result, are easier for most people to reason about.

Jose Arteaga • Nov 28 '19

I really appreciate your answer taking your time to explain each of them! It really helps. Thanks!

Gabe Romualdo • Nov 25 '19 • Edited

In my personal experience, overall, I've found it best to use viewport percentages (vh, vw, etc.) for elements that seem to logically scale based on the viewport, like containers, or large elements, then percentages for elements which logically scale to their parents, and REMs for everything else.

One rule that I follow is to never use pixels anywhere, except for really small values like borders and such. This is because technology is so fast moving, and thus screen sizes change so quickly. Sites built 10 years ago look eternally small on today's machines because they were built for 1000x700px screens compared to today's common 2560x1600px "retina displays". For that, I personally simply wouldn't use px units in CSS, although of course, that is up to you, and many responsive designs today do still use px as a main unit in their styles.

For most things such as font-sizes and paddings, I personally use REMs. REM size is relative to the font size of the root element ( tag is normally the root element). So, if your root font size is 16px, then 1.5rem would be calculated as 16px*1.5 = 24px. Using REM is particularly helpful because you can very easily change the general size and proportion of your entire site by changing just the font size of one element — change 1 style and you have the ability to scale your site bigger and smaller with ease. This can be particularly useful in making sites responsive, so making your site entirely smaller on mobile, or slightly larger on desktop monitors compared to laptop screens. The ability to change the font size of the root element and thus change the size of the entire site is the main feature of REM that has personally drawn me towards it, and away from EMs (EMs are scaled towards the current element's font size, not the root's).

For large elements such as containers or large navigation bars, I would recommend using percentages or viewport units. For example, with a large full-width footer, I would probably say that it is "width: 100%;" or "width: 100vw;". I have had experiences where using vw as a unit in particular messes up things with scrollbars taking up some of the actually vw and things like that, so I would probably use percentages instead of vw unless you have no other option. In general, in my experience, vh is much more useful than vw, and I've found it best to also not use viewports on their own, such as "85vh", but instead use them with a CSS calculation, like "calc(100vh - 15rem)" as this optimizes for a larger array of screen sizes and ratios.

In terms of using units in media queries, I always use px, because it is one unit that is the same across all devices. If your site does not work on one 500px width screen, it will not work on any other 500px width screens, while that may not be the same with different units such as REM which can be changed by the browser or user themselves.

I hope this answers your question, and I wish you very good luck with the FreeCodeCamp projects!

— Gabriel

Jose Arteaga • Nov 28 '19

I couldn't agree more with you Fred! Just in the last FCC project I realized that working with pixels for containers is so complicated! Besides, I defined some media queries (Samsung S9, IPAD, Laptop with Touch and 1080p resolution), when I tested in Mac or iphones it didn't work as I was expecting though! So many doubts came to my mind, if I have to define a media query for every resolution or device, which I think is too complicated, so there should be a better and faster way to achieve it and being supported in many devices.

emptyother • Nov 25 '19

I have had good experience with using mostly EM for heights and % for widths so far. And REM to reset the font size when I'm doing component-like development. Viewport sizes (vh,vw) only on root elements. Not on floating components.

Jose Arteaga • Nov 28 '19

Thanks for your answer! Definitely I need to retake this topic and understand deeper some units. I think I'm mixing all of them without reason.

Nicholas Stimpson • Nov 25 '19 • Edited

You can use all of them. No CSS units are incompatible with responsive design, so you should use the ones that fit each particular layout requirement as you address it.

Jose Arteaga • Nov 28 '19

Exactly that is the point, I have to go a little bit deeper with this units and understand them, and so identify which one is more convenience for a specific situation. Thanks!!

Dima • Nov 25 '19

There is quite good article about all those units in css:
w3.org/Style/Examples/007/units.en...
Check it out, maybe it'll be useful for you :)

Jose Arteaga • Nov 28 '19

I will go through of it! Thanks for sharing and your help! I need to dive into this topic.

Vijay • Nov 25 '19

Even I want to know when to use when for responsive design. If any can explain each unit and when to use it and when to not, it will be help for feature designs.