Estou desenvolvendo uma página da Web que usa tamanhos diferentes para seus parágrafos diferentes, h ... e assim por diante. estou a usarem Tamanhos:tamanho da fonte: 2em;, como um exemplo. Mas quando eu mudo a minha resolução de tela para uma mais baixa, eu quero esse tamanho para um menor.

Para esse propósito, eu tentei este código:

<script>
        if ( screen.width > 1600)
        {
            document.write('<style>#centered h1 { font-size: 2em; } </style>');
        }
        else if (screen.width <= 1600 && screen.width >= 1360)
        {
            document.write('<style>#centered h1 { font-size: 1.7em; } </style>');
        }
        else if (screen.width < 1360 && >= 1024)
        {
            document.write('<style>#centered h1 { font-size: 1.4em; } </style>');
        }
        else
        {
            document.write('<style>#centered h1 { font-size: 0.8em; } </style>');
        }
    </script>

Primeiro: não funciona ...
Segundo: acho que deveria haver uma maneira mais limpa de fazer isso ...

Então, a pergunta é: como usar tamanhos diferentes para minhas fontes ou como fazê-los se ajustar a diferentes resoluções?

Alguém pode ajudar por favor? Obrigado!