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
Matthaios Katsivelis
525 PointsHow we use the percentages and rem at media queries?
Hi everyone! I try to understand how we use the % and rem. So if i set the body{font-size:62.5% } // this will make my 1rem=10px since the default Browser value is 16px.
I know that for fonts the % means that is equal x%* parent's computed font-size and for length % means x%parent's computed width.
My questions: 1) do we use percentages or rem for length properties ? which is best to maintain control when doing changes with media queries? 2) do we use % or rem when specifying the font-size to other elements (except the body)? 3) what happens if we mix % and rem? How is possible to have logic control of what is what when the % are converted differently for fonts and lengths and the same goes for the rem?
3 Answers
Kevin Barnes
18,352 Points1.) It depends how specific you want to be - I've not seen any use for rem in lengths, though it can be used for media queries (note that it defaults to 16px and ignores the global declaration like it would for font-size)
2.) rem is intended to maintain consistency by referring to the root font size. So if you set the root font size to 62.5% then it's best to use rem values for specifying the font-size of other elements, otherwise it's pointless setting the root font-size to begin
3.) The practice I've seen for what you're talking about uses % to set the root font-size to make calculations easier when using rem throughout the body (in the 62.5% example 1 rem = 10px so it's easier to use than if 1 rem = 16px. I believe using % to set font-size in elements will just give you the % of the default. For example if the default for h1 is 2em (32px) then setting that to say 75% will set the font-size to 24px
I think these articles might be useful to understand better: (https://www.sitepoint.com/understanding-and-using-rem-units-in-css/) (https://css-tricks.com/rem-global-em-local/)
Matthaios Katsivelis
525 PointsKevin you really helped me. Thanks a lot!
Matthaios Katsivelis
525 PointsThanks Kevin for your response.
I read the article it is helpful but still don't have a clear idea where to use each.
Do you follow any practical rule ?
For example.
Would you use rem only for the font-size and percentages (%) for margin, padding, width, height?
I have seen cases like: h1{font-size:180%;} and cases like section{padding: 8rem 0;}
I get that i can use everything anywhere since all are converted finally to pixels but it is very confusing.
Especially if someone is new to development to be able to choose and maintain the correct unit for each purpose.
Kevin Barnes
18,352 PointsI tend to mix and match based on what I'm working on. I'd most likely use rem for font & % for width. Padding, margin etc depends on how much control I want, I'm a little bit behind when it comes to using rem due to the projects I'm working on already using a defined system. I know that's not really helpful but I guess the point I'm getting at is use what's most appropriate to what you're doing, there's really no right or wrong answers, just best practice and experience. Good luck!