I think this can't be better explained:
css font sizing by @ireaderinokun
Summing up:
html {
font-size: 62.5%; /* sets the base font to 10px for easier math */
}
body {
font-size: 16px;
font-size: 1.6rem;
/* sets the default sizing to make sure nothing is actually 10px */
}
h1 {
font-size: 32px;
font-size: 3.2rem;
}
Then use media queries:
@media screen and (min-width: 1280px) {
html {
font-size: 100%;
}
}