有几种方法可以实现这一点。

使用媒体查询，但它要求几个断点的字体大小:

body
{
    font-size: 22px;
}

h1
{
    font-size: 44px;
}

@media (min-width: 768)
{
    body
    {
        font-size: 17px;
    }
    h1
    {
        font-size: 24px;
    }
}

使用%或em的尺寸。只要改变基本字体大小，一切都会改变。与前一个不同的是，你可以只改变主体字体，而不是每次都是h1，或者让基本字体大小是设备的默认值，其余都在em中:

“Ems” (em): The “em” is a scalable unit. An em is equal to the current font-size, for instance, if the font-size of the document is 12 pt, 1 em is equal to 12 pt. Ems are scalable in nature, so 2 em would equal 24 pt, .5 em would equal 6 pt, etc.. Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12 pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

看到kyleschaeffer.com/..。

CSS 3支持相对于视图端口的新维度。但这在Android上行不通:

3.2vw =视口宽度的3.2% 3.2vh =视口高度的3.2% 3.2vmin =小于3.2vw或3.2vh 3.2vmax =大于3.2vw或3.2vh 身体 ｛ 字体大小:3.2大众; ｝

参见CSS-Tricks…再看看Can I Use…

有很多答案，但我没有看到任何人提到与媒体查询相结合的最小或最大函数

在CSS中有一个max()函数，所以我们上面的例子变成了一行代码:

font-size: max(30vw, 30px);

或者用最小值和最大值加倍:

font-size: min(max(16px, 4vw), 22px);

这与:

font-size: clamp(16px, 4vw, 22px);

然后不要忘记将其包装在媒体查询中，并应用于您喜欢的h1,h2,h3,h4,h5,h6。

    @media (max-width: 600px) {
      h1 {
           font-size: clamp(16px, 4vw, 22px);
         }
    }

“大众”的解决方案在非常小的屏幕上有一个问题。你可以用calc()设置基础大小并从那里往上:

font-size: calc(16px + 0.4vw);

我在CSS-Tricks上看到一篇很棒的文章。它工作得很好:

body {
    font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw -
    [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

例如:

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

我们可以将相同的公式应用于行高属性，使它也随浏览器而改变。

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}

关于字体大小的调整，恐怕没有任何简单的解决方案。您可以使用媒体查询更改字体大小，但从技术上讲，它不会平滑地调整大小。举个例子，如果你使用:

@media only screen and (max-width: 320px){font-size: 3em;}

字体大小为3em，宽度为300像素和200像素。但你需要更低的字体大小为200px宽度，以实现完美的响应。

那么，真正的解决方案是什么?只有一个办法。您必须创建一个包含文本的PNG图像(具有透明背景)。之后，你可以很容易地让你的图像响应(例如:宽度:35%;高度:28 px)。通过这种方式，您的文本将与所有设备完全响应。

我使用这些CSS类，它们使我的文本在任何屏幕大小上都是流动的:

.h1-fluid {
    font-size: calc(1rem + 3vw);
    line-height: calc(1.4rem + 4.8vw);
}

.h2-fluid {
    font-size: calc(1rem + 2vw);
    line-height: calc(1.4rem + 2.4vw);
}

.h3-fluid {
    font-size: calc(1rem + 1vw);
    line-height: calc(1.4rem + 1.2vw);
}

.p-fluid {
    font-size: calc(1rem + 0.5vw);
    line-height: calc(1.4rem + 0.6vw);
}