h1{
  font-size : clamp(2rem, 10vw, 5rem);
}

这里clamp有三个参数。

第一个是允许的最小字体大小。 第三个是允许的最大字体大小。 第二个参数是您希望始终具有的font-size。它的单位必须是相对的(vw, vh, ch)，而不是绝对的(i。E不是px mm pt)相对单元将使它改变其大小W.R.T变化的屏幕尺寸。

举个例子: 假设有一个很大的fontawesome图标，您想动态调整它的大小(响应式图标)

fa-random-icon{
   font-size: clamp( 15rem, 80vw, 80vh)   
}

这里80vw是首选的字体大小。 15雷姆是最小字体大小(下界)。 80vh是最大字体大小(上限)。

i.e.

如果在特定的移动屏幕尺寸中，如果80vw < 15rem，则字体大小为15rem。 如果屏幕太宽，那么如果80vw > 80vh，那么字体大小是80vh。

人们提出的上述方法往往效果不确定。就像我们只使用vw时，字体大小有时可能太大或太小(无界)。

@media查询可以使用，但你必须使用至少3个媒体查询，使字体大小响应

设置你的基本字体大小和夹钳功能。

使用clamp()来设置字体大小，就像在这些例子中一样，允许您设置一个随视口大小而增长的字体大小，但不会低于最小字体大小

夹钳方法MDN文档

这里有一个例子。

h1 {
  font-size: clamp(1.5em, 4vw, 2.5em);
}

h2 {
font-size: clamp(1.2em, 4vw, 2.4em);
}

p {
font-size: clamp(0.6em, 4vw, 1.2em);
}

我在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)。通过这种方式，您的文本将与所有设备完全响应。

响应式字体大小还有另一种方法——使用rem单位。

html {
    /* Base font size */
    font-size: 16px;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.2rem;
}

在稍后的媒体查询中，您可以通过更改基本字体大小来调整所有字体的大小:

@media screen and (max-width: 767px) {
    html {
      /* Reducing base font size will reduce all rem sizes */
      font-size: 13px;
    }

    /* You can reduce font sizes manually as well */
    h1 {
        font-size: 1.2rem;
    }
    h2 {
        font-size: 1.0rem;
    }
}

为了让这个在ie7和ie8中工作，你必须添加一个以px为单位的回退:

h1 {
    font-size: 18px;
    font-size: 1.125rem;
}

如果您正在使用Less进行开发，您可以创建一个mixin，它将为您进行数学计算。

Rem单元支持- http://caniuse.com/#feat=rem

你可以使用viewport值代替ems, pxs或pts:

1vw =视口宽度的1% 1vh =视口高度的1% 1vmin = 1vw或1vh，取较小者 1vmax = 1vw或1vh，取较大者

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

来自CSS-Tricks:视口大小的排版