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)
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:
1px
in print media for most CSS implementations is equal to1pt
). They aren't responsive, aren't consistent, and sometimes interfere with zoom functionality.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).<span>
element for each tag, and change the font-size of that using EM units.<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.I really appreciate your answer taking your time to explain each of them! It really helps. Thanks!
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
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.
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.
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.
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.
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!!
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 :)
I will go through of it! Thanks for sharing and your help! I need to dive into this topic.
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.
I would def read this article:
24a11y.com/2019/pixels-vs-relative...