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
Gary Calhoun
10,317 PointsSo do we use ems and use rems as a last resort?
So do we use ems first and then use rems as a last resort if ems are giving us too strong of a measurement? Also do we use percentages only for responsive purposes for the most part alongside with the mobile query?
3 Answers
Jeffrey Ruder
6,408 PointsHere is a good article I saw someone else post about rems vs. ems. The most important part is the last sentence, I think - he explains that if he is having to use rems a lot, it probably means his code is getting too complicated.
Yes, the percentages are an important part of making a website responsive. Nick Pettit advocates for responsive design using a fluid grid, which means using percentages most of the time for most things. He also advocates for mobile-first design, which means creating the mobile version first (using percentages) and adding media queries to know when to change things for bigger screens.
Craig Watson
27,930 PointsHi Gary,
To explain the units a little more - An "EM" unit is relative to its parent font size, where the "REM" unit is relative to the root elements font size.
Examples:
EM - Body elements font size is set to 18px, your first element inside the body tag is a H1 and you give that a font size of 1em, the px font size of the H! will be 18px.
REM - As above you body font size is 18px but your HTML tag font size is set at 16px if you then give your H1 tag a font size of 1rem its px font size would be 16px.
Look here for and working example i set up
REM's are for me more manageable across a whole site, however IE8 does not support them so you have to factor that in to your decision to use them.
EM's are a solid way or responsibly adapting your layout for example:
In your media query simply adjusting the Body font size, if you have all your other font sizes in ems, this will then in turn change them to scale with the adapted new query font size.
To answer your second question, I think you are on the right lines. Percentage values being used for padding, margin, widths, heights and so on are all factors in responsive design. Handling them with media queries will allow you to quickly turn a 2 col layout with the cols at 50% widths to a 1 col layout for mobiles with col widths at 100% (with a few floats and this to) but it is simple enough when you see it in action.
I hope this helps and has cleared a few things up, if not let me know im happy to help :)
Craig
Gary Calhoun
10,317 PointsThanks for the reply, I honestly never used rem before that is why I asked and was able to make websites without any issues.
I will give these links a read. Thanks again.