如果你不介意使用jQuery解决方案，你可以尝试TextFill插件

jQuery TextFill调整文本大小以适合容器，并使字体大小尽可能大。

https://github.com/jquery-textfill/jquery-textfill

你可以通过以下方法来实现这一点:

用rem表示例如2.3 rem 用em表示例如2.3em 用%表示2.3% 此外，你可以使用: Vh vw vmax vmin。

这些单元将根据屏幕的宽度和高度自动调整大小。

字体大小的变化取决于屏幕大小使用CSS，你可以看到这个H1标签是有响应的。(如果我说错了请指正)

@media only screen和(max-width: 1000px) { h1 { 字体大小:5 em; ｝ ｝ @media only screen和(max-width: 500px) { h1 { 字体大小:3他们; ｝ ｝ @media only screen和(max-width: 300px) { h1 { 字体大小:2 em; ｝ ｝ @media only screen和(max-width: 100px) { h1 { 字体大小:1 em; ｝ ｝ 调整浏览器大小!< / h1 >

我刚刚提出了一个想法，每个元素只需定义一次字体大小，但它仍然受到媒体查询的影响。

首先，我设置变量“——text-scale-unit”为“1vh”或“1vw”，这取决于使用媒体查询的视口。

然后我使用calc()变量和我的字体大小乘数:

/* Define a variable based on the orientation. */ /* The value can be customized to fit your needs. */ @media (orientation: landscape) { :root{ --text-scale-unit: 1vh; } } @media (orientation: portrait) { :root { --text-scale-unit: 1vw; } } /* Use a variable with calc and multiplication. */ .large { font-size: calc(var(--text-scale-unit) * 20); } .middle { font-size: calc(var(--text-scale-unit) * 10); } .small { font-size: calc(var(--text-scale-unit) * 5); } .extra-small { font-size: calc(var(--text-scale-unit) * 2); } <span class="middle"> Responsive </span> <span class="large"> text </span> <span class="small"> with one </span> <span class="extra-small"> font-size tag. </span>

在我的例子中，我只使用了视口的方向，但是这个原则应该适用于任何媒体查询。

响应式字体大小还有另一种方法——使用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

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个媒体查询，使字体大小响应