我在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)));
}

你可以使用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:视口大小的排版

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

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

首先，我设置变量“——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>

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

这是对我有用的方法。我只在iPhone上进行了测试。

无论你有h1, h2或p标签，把它放在你的文本周围:

<h1><font size="5">The Text you want to make responsive</font></h1>

这将在桌面上呈现一个22pt的文本，在iPhone上仍然可读。

<font size="5"></font>

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

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

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

示例用法:

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