根据分辨率更改字体大小

Question

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

第一:它不起作用......
第二:我认为应该有更清洁的方法这样做......

所以,问题是:如何对我的字体使用不同的大小或如何使它们针对不同的分辨率进行调整？

有人可以帮忙吗？谢谢!

Answer 1

尝试使用这个概念证明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%; }
}

关于jsFiddle的工作演示