jquery – 根据分辨率更改字体大小

我正在开发一个网页,使用不同的大小不同的段落,等等.我正在使用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>

第一：它不行
第二：我认为应该有更干净的方法呢

那么问题是：如何使用不同尺寸的字体或如何使它们调整不同的分辨率？

有人可以帮忙吗？谢谢！

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%; }
}