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!
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.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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.