纯CSS，可根据动态字符数对字体大小做出响应

calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));

使用这个方程式。

对于大于或小于1440和768的任何值，可以给它提供静态值，也可以应用相同的方法。

vw解决方案的缺点是您无法设置缩放比例，例如在1440屏幕分辨率下的5vw可能会变成60px字体大小（即您的想法字体大小），但是当您将窗口宽度缩小到768时，它可能会结束是12px，不是您想要的最小值。使用这种方法，您可以设置上边界和下边界，并且字体会在两者之间自行缩放。

尝试MartijnCuppens的RFS（用于响应字体大小）库，该库可能会在Bootstrap中实现

作为参考，一个非CSS解决方案：

下面是一些JS，它根据容器内的文本长度来调整字体大小。

Codepen的代码稍有修改，但思路如下：

function scaleFontSize(element) {
    var container = document.getElementById(element);

    // We only want to scale down long text, so first we reset
    // font-size to 100%, in case this function is called multiple times.
    container.style.fontSize = "100%";

    // Now actually check if the text is wider than
    // its container, if so then reduce font-size
    if (container.scrollWidth > container.clientWidth) {
        container.style.fontSize = "70%";
    }
}

对我来说，当用户在下拉菜单中进行选择时，我会调用此函数，然后填充菜单中的div（这是发生动态文本的位置）。

    scaleFontSize("my_container_div");

另外，我还使用CSS省略号（“ ...”）截断甚至更长的文本，如下所示：

#my_container_div {
    width: 200px; /* width required for text-overflow to work */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

因此，最终：

• 短文字：例如“ APPLES”

  充分呈现，漂亮的大字母。

• 长文本：例如“苹果和橘子”

  通过上面的JS缩放功能将其缩小70％。

• 超长文字：例如“ APPLES＆ORANGES＆BANAN ...”

  通过上面的JS缩放功能和CSS规则，将比例缩小70％，并用“ ...”省略号截断。

您还可以探索使用CSS字母间距来缩小文本，同时保持相同的字体大小。

CSS3支持与视口相关的新尺寸。但这在android <4.4中不起作用

1. 3.2vw =视口宽度的3.2％
2. 3.2vh =视口高度的3.2％
3. 3.2vmin =小于3.2vw或3.2vh

4. 3.2vmax = 3.2vw或3.2vh较大

   body
   {
       font-size: 3.2vw;
   }
   

请参阅css-tricks.com / ....，也请参阅caniuse.com /...。

要么

使用媒体查询。最简单的方法是使用％或em尺寸。只需更改基本字体大小，一切都会改变。

@media (max-width: @screen-xs) {
    body{font-size: 10px;}
}

@media (max-width: @screen-sm) {
    body{font-size: 14px;}
}


h5{
    font-size: 1.4em;
}

使用以％或em为单位的尺寸。只需更改基本字体大小，一切都会改变。在上一个版本中，您可以只更改主体字体，而不必每次都更改h1，或者将基本字体大小设置为设备的默认值，并将其全部保留在em中

有关em，px和％的更多信息，请参见kyleschaeffer.com / ....

我刚刚发现，使用大众汽车可以做到这一点。它们是与设置视口宽度相关联的单位。有一些缺点，例如缺乏对旧版浏览器的支持，但这绝对是认真考虑使用的东西。另外，您仍然可以为旧版浏览器提供后备广告，例如：

p {
    font-size: 30px;
    font-size: 3.5vw;
}

http://css-tricks.com/viewport-sized-typography/ 和 https://medium.com/design-ux/66bddb327bb1

唯一的方法可能是为不同的屏幕尺寸设置不同的宽度，但是这种方法非常不准确，您应该使用js解决方案。

h1 {
    font-size: 20px;
}

@media all and (max-device-width: 720px){
    h1 {
        font-size: 18px;
    }
}

@media all and (max-device-width: 640px){
    h1 {
        font-size: 16px;
    }
}

@media all and (max-device-width: 320px){
    h1 {
        font-size: 12px;
    }
}

我知道我要解决一个长期存在的问题，但是我有同样的问题，我想补充一点。请不要为此禁止我，我觉得证明这个答案很重要，如果需要，我将其删除。@Joseph Silber是错误的，编码所有可能性实际上是一种可行的方法。原因是因为实际上没有无限的可能性。是的，从技术上讲，有，但是您99％的访客将使用标准分辨率。对于移动设备（这是响应式Web设计的主要原因），这是双重事实，因为大多数移动操作系统在不调整窗口大小的情况下全屏运行应用程序。

另外，由于滚动条的原因，高度几乎无关紧要（在某种程度上，我会立即留下一个超过4或5英尺长的网页，但这基本上是正确的），因此您只需要担心宽度。实际上，您只需要编写以下宽度：240、320、480（适用于较旧的iThings），640、800、1024、1280、1440、1600、1920、2048、2560。 4k，它将使您的图像过分膨胀，而将2560尺寸拉伸到100％的宽度在4k显示器上看起来还不错（我已经测试过）。另外，请不要像以前的海报所建议的那样使用720（720x480）。它的分辨率几乎是数码相机专用的，即使这样也很少见。

如果有人使用奇异分辨率，则过去15年中制作的几乎所有渲染器都将舍入，例如，如果某人的屏幕宽度为。1100，它将加载1024 CSS规则，您的网站应该不会损坏。通过尝试创建不必要的响应规则，这无需考虑特殊的分辨率，除非您使用的Web浏览器过时以至于您的网站可能无法加载，否则您需要为每个可能的设置像素逐个编码的想法是荒谬的。无论如何。

您可能对该calc方法感兴趣：

font-size: calc(4vw + 4vh + 2vmin);

完成。调整值直到符合您的口味。

资料来源：https : //codepen.io/CrocoDillon/pen/fBJxu