如果你正在使用一个构建工具，那么试试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);
}

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

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

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

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

解决文本在台式机和移动/平板电脑上都好看的问题的一种方法是将文本大小固定为物理单位，如物理厘米或英寸，这与屏幕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正确配置。

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

如果在vw(视口宽度)中定义字体大小，则可以使字体大小具有响应性。然而，并非所有浏览器都支持它。解决方案是使用JavaScript根据浏览器宽度更改基本字体大小，并以%为单位设置所有字体大小。

下面是一篇描述如何制作响应式字体大小的文章:http://wpsalt.com/responsive-font-size-in-wordpress-theme/

与许多框架一样，一旦你“离开网格”并覆盖框架的默认CSS，事情就会开始左右分裂。框架本质上是刚性的。如果你要使用Zurb的默认H1样式和默认网格类，那么网页应该在移动设备上正常显示(即响应式)。

然而，看起来你想要非常大的6.2em标题，这意味着文本将不得不缩小以适应纵向模式的移动显示。你最好的选择是使用响应文本jQuery插件，如FlowType和FitText。如果你想要一些轻量级的东西，那么你可以看看我的可伸缩文本jQuery插件:

http://thdoan.github.io/scalable-text/

示例用法:

<script>
$(document).ready(function() {
  $('.row .twelve h1').scaleText();
}
</script>

在调整浏览器窗口大小时，字体大小不会像这样响应。相反，它们会对浏览器的缩放/类型大小设置做出响应，比如在浏览器中同时按下键盘上的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中得到了修复。