Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Joseph Torres
6,280 PointsHow would I know when use rem, em, and viewport units? Is there a better one to use?
I'm just trying to wrap my head around when I should use or do I use them all on a website and at what times? Thank you.
2 Answers
Steven Parker
229,732 PointsViewport units can be handy to create responsive sizing, particularly for images, that adjusts to different devices. It is more likely to be used as an alternative to percentages or fixed pixel dimensions, but it may occasionally be used to replace (or be replaced by) em or rem units.
The "em" unit can be handy for sizing things relative to how big the current font being used is. This might be used to size images to fit within a certain character span that are near or placed within the text.
The "rem" unit works much like the "em" but it is always based on the font size of the root (html) element (the "r" in "rem") instead of the font size in use on the current element. These units can be useful where multiple nesting and variable font sizes can make the final dimension unpredictable.
In addition to the courses here, there are variety of information sources on these units online. A few starters you might enjoy (these are all from the "CSS Tricks" site):
Max Senden
23,177 PointsHi Joseph,
In the industry I've never seen viewport units being used for anything. So you can forget about those (feel welcome to correct me someone, at least if you have a good argument).
I myself tend to work solely with rems because its base value always remains the same (it's based on the root HTML font-size). So unless I change that 1 rem = 16px, 2 rem = 32px. With ems its base value comes from the font-size of the nearest parent element. So ems can have different sizes on various part of your website making it confusing to use at times.
However, this is my preference. Probably someone else here on this forum can give you good counter-arguments on why to use ems.
Hope it helps, Max
Joseph Torres
6,280 PointsThank you so much for your reply. I know there are so many ways to do the same things. Im not sure if people are just trying to be fancy buy using a combination of all different types of units. I just want it to be simple.
Joseph Torres
6,280 PointsWould using just rem's apply to building a landing page?