Я разрабатываю веб-страницу, которая использует разные размеры для разных абзацев, h ... и так далее. Я используюem размеры:font-size: 2em;, В качестве примера. Но когда я меняю разрешение экрана на более низкое, я хочу, чтобы этот размер был меньше.

Для этого я попробовал этот код:

<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>

Во-первых, это не работает ...
Второе: я думаю, что должен быть более чистый способ сделать это ...

Итак, вопрос: как использовать разные размеры для моих шрифтов или как настроить их для разных разрешений?

Может кто-нибудь помочь, пожалуйста? Спасибо!