根据分辨率更改字体大小 [英] Change font size depending on resolution

问题描述

我正在开发一个网页，为不同的段落使用不同的大小，h ...等等。我使用 em 大小： font-size：2em; 作为示例。但是当我把屏幕分辨率改成较低的时候，我想要那个尺寸更小。

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 change my screen resolution to a lower one, I want that size to a smaller one.

为此，我尝试了以下代码：

For that purpose, I tried this code:

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

首先：无法运行...

第二：认为应该有更干净的方式这样做...

First: it doesn't work...
Second: I think there should be cleaner way to do so...

所以，问题是：如何使用不同的大小到我的字体或如何使它们适应不同的分辨率？

So, the question is: how to use different sizes to my fonts or how to make them adjust for different resolutions?

任何人都可以帮忙吗？谢谢！

Can anyone help please? Thanks!

推荐答案

尝试使用此概念证明CSS：

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

这篇关于根据分辨率更改字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！