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
Joe Consterdine
13,965 PointsWhat breakpoints + sizes do you set for REMs?
Hey guys,
lets imagine you've set up a type scale using rems.
Your HTML is set to 1rem... so 16px.
Now I guess the issue with this is at mobile devices the font-size is still at 16px.
Would you normally have your body font-size at 16px at these screen sizes? I'm guessing at least for headers you'd want these to scale down so naturally you'd need to scale down your rem sizes too?
What's your approach?
Would you do something like:
html {
font-size: .8rem;
}
@media (min-width: 480px) {
html { font-size: 1rem; }
}
I've also seen people use REMs as their breakpoints width, but I'm not sure why or how you would work it out.
Like this:
html {
font-size: .8rem;
}
@media (min-width: 40rems) {
html { font-size: 1rem; }
}
Cheers.
1 Answer
Steven Parker
243,658 PointsMy first thought is that media queries based on pixels are general-purpose, and ones based on rems would be specific to text displays. Your example of min-width:40rems is saying "for devices which can display at least 40 characters..." where the more general query says "for devices which are at least 480 pixels..."