REM Font-size (media queries)

by Niels Harbo

HTML

<p class="small">
This is a paragraph with a small font size but the size is still relative to the HTML elements font size at all media queries
</p>
<p class="medium">
This is a paragraph with a medium font size but the size is still relative to the HTML elements font size at all media queries
</p>
<p class="big">
This is a paragraph with a big font size but the size is still relative to the HTML elements font size at all media queries
</p>

CSS

html{font-size:13px;}
.small{font-size:0.8rem;}
.medium{font-size:1rem;}
.big{font-size:2rem;}

/*In the maedia queries we only have to specify a font size for the HTML element. All the rem sizes will be relative to this*/
@media screen and (min-width: 500px) {
  html{font-size:19px;}
}
@media screen and (min-width: 750px) {
  html{font-size:26px;}
}