我使用这些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);
}

文本大小可以用vw单位设置，这意味着“视口宽度”。这样，文本大小将跟随浏览器窗口的大小:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_text

在我的个人项目中，我使用vw和@meida。它工作得很完美。

.mText {
    font-size: 6vw;
}

@media only screen and (max-width: 1024px) {
    .mText {
        font-size: 10vw;
    }
}


.sText {
    font-size: 4vw;
}

@media only screen and (max-width: 1024px) {
    .sText {
        font-size: 7vw;
    }
}

在调整浏览器窗口大小时，字体大小不会像这样响应。相反，它们会对浏览器的缩放/类型大小设置做出响应，比如在浏览器中同时按下键盘上的Ctrl和+。

媒体查询

你必须考虑使用媒体查询来减少字体大小在特定的时间间隔，它开始破坏你的设计和创建滚动条。

例如，试着在你的CSS底部添加这个，在你的设计开始中断的地方改变320像素的宽度:

@media only screen and (max-width: 320px) {

   body { 
      font-size: 2em; 
   }

}

视口百分比长度

你也可以使用视口百分比长度，如vw, vh, vmin和vmax。官方W3C文档声明:

viewport-percentage长度相对于初始包含块的大小。当初始包含块的高度或宽度发生变化时，它们将相应地缩放。

同样，从同一W3C文档中，每个单独的单元可以定义如下:

vw单位-等于初始包含块宽度的1%。 vh单位-等于初始包含块高度的1%。 vmin单位-等于vw或vh中较小者。 vmax单位-等于vw或vh中较大的一个。

它们的使用方式与其他CSS值完全相同:

.text {
  font-size: 3vw;
}

.other-text {
  font-size: 5vh;
}

从这里可以看出，兼容性相对较好。但是，某些版本的ie浏览器和Edge浏览器不支持vmax。此外，iOS 6和7的vh单位也有问题，这在iOS 8中得到了修复。

使用CSS媒体说明符(这是他们[zurb]使用的)来进行响应式样式:

@media only screen and (max-width: 767px) {

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}

如果你正在使用一个构建工具，那么试试Rucksack。

否则，你可以使用CSS变量(自定义属性)来轻松控制最小和最大字体大小，就像这样(演示):

* {
  /* Calculation */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}

h1 {
  --max-size: 50;
  --min-size: 25;
  font-size: var(--responsive);
}

h2 {
  --max-size: 40;
  --min-size: 20;
  font-size: var(--responsive);
}

解决文本在台式机和移动/平板电脑上都好看的问题的一种方法是将文本大小固定为物理单位，如物理厘米或英寸，这与屏幕PPI(每英寸点数)无关。

基于这个答案，下面是我在HTML文档末尾使用的响应式字体大小的代码:

<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>
<script type='text/javascript'>
  var devicePixelRatio = window.devicePixelRatio || 1;
  dpi_x = document.getElementById('testdiv').offsetWidth * devicePixelRatio;
  dpi_y = document.getElementById('testdiv').offsetHeight * devicePixelRatio;

  function setFontSizeForClass(className, fontSize) {
      var elms = document.getElementsByClassName(className);
      for(var i=0; i<elms.length; i++) {
          elms[i].style.fontSize = String(fontSize * dpi_y / 96) + "px";
      }
  }

  setFontSizeForClass('h1-font-size', 30);
  setFontSizeForClass('action-font-size', 20);
  setFontSizeForClass('guideline-font-size', 25);
  // etc for your different classes
</script>

在上面的代码中，不同类别的项目以物理单位分配字体大小，只要浏览器/OS为其屏幕的PPI正确配置。

物理单位字体总是不太大也不太小，只要到屏幕的距离是正常的(阅读书籍的距离)。