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

Design Web Typography Laying Out Type for the Web Responsive Typography

David Scanu
David Scanu
20,160 Points
Posted by David Scanu
David Scanu
20,160 Points

Why using the media querie on the body selector, not on the html selector ?

I am using a sass mixin that allows you to size all your font using rems with a px fallback.

If we want to avoid nesting problems using ems, and start using rems (or both units in our stylesheet), why do we keep changing the body font-size in our media queries ? Wouldn't it be smarter to change the html font-size as it would affect both rems and ems sizes of children elements ?

(If we change the body font-size, and we used rems on children elements, their font size won't change.)

Edit : I want to share the discovery I just made experimenting with media queries and ems unit. Here is a quote from a good article I found on the topic :

"The ems in the media queries seem to be based on the browser’s font size, not on that declared in your stylesheet. Even if you set your font-size to 12px at the html element and then use relative sizes onward based on these 12px (as made popular by many reset stylesheets), the media query will use your browser’s font size of ~16px"

Source : http://www.stephanmuller.nl/ems-relative-media-queries/