Change font size depending on resolution

Question

I\'m developing a Web page that uses different sizes for its different paragraphs, h... and so on. I\'m using em sizes: font-size: 2em;, as an example. But when I

Answer 1

Try to use this concept proof CSS:

html { font-size: 62.5%; }
body { font-size: 1em;}

@media (max-width: 300px) {
    html { font-size: 70%; }
}

@media (min-width: 500px) {
    html { font-size: 80%; }
}

@media (min-width: 700px) {
    html { font-size: 120%; }
}

@media (min-width: 1200px) {
    html { font-size: 200%; }
}

Working demo on jsFiddle