我使用Zurb Foundation 3网格创建了一个网站。每个页面都有一个大的h1标签：
body {
font-size: 100%
}
/* Headers */
h1 {
font-size: 6.2em;
font-weight: 500;
}<div class="row">
<div class="twelve columns text-center">
<h1> LARGE HEADER TAGLINE </h1>
</div>
<!-- End Tagline -->
</div>
<!-- End Row -->当我将浏览器调整为移动设备大小时，大字体不会自动调整大小，导致浏览器需要包含水平滚动条来适应大文本。
我发现在Zurb Foundation 3排版示例页面上，标题会随着浏览器的压缩和扩展而自适应。
我是否漏掉了一些非常明显的东西？我该如何实现这一点？
您可以使用视口单位（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：视窗尺寸大小的排版
当调整浏览器窗口大小时，font-size不会做出相应的调整。相反，它们会响应浏览器缩放/字体大小设置，例如在浏览器中同时按下键盘上的Ctrl和+。
媒体查询
您需要查看使用媒体查询的方法，在某些间隔处降低字体大小，以防止设计出现问题并创建滚动条。
例如，请尝试在底部的CSS中添加以下内容，将320像素宽度更改为设计开始出现问题的位置：
@media only screen and (max-width: 320px) {
body {
font-size: 2em;
}
}
视口百分比长度
您还可以使用视口百分比长度，例如vw、vh、vmin和vmax。官方的W3C文档说明如下：
视口百分比长度相对于初始包含块的大小。当初始包含块的高度或宽度改变时，它们会相应缩放。
同样来自于W3C文档，每个单独的单位可以定义为以下内容：
vw单位 - 相当于初始包含块宽度的1%。
vh单位 - 相当于初始包含块高度的1%。
vmin单位 - 相当于vw和vh中较小的值。
vmax单位 - 相当于vw和vh中较大的值。
它们的使用方式与任何其他CSS值完全相同：
.text {
font-size: 3vw;
}
.other-text {
font-size: 5vh;
}
兼容性相对较好，可以在这里看到。但是，一些版本的Internet Explorer和Edge不支持vmax。此外，iOS 6和7存在vh单位问题，该问题已在iOS 8中修复。
font-size: 1.5vw; 是什么意思？ - Dev_NIXfont-size: calc(12px + 1vw)。 - cuzoxh1{
font-size : clamp(2rem, 10vw, 5rem);
}
这里的 clamp 函数有 3 个参数。
第一个参数是最小允许的字体大小。
第三个参数是最大允许的字体大小。
第二个参数是您希望始终拥有的字体大小，其单位必须是相对单位（vw、vh、ch），而不是绝对单位（例如 px、mm、pt）。相对单位将使它根据屏幕尺寸的变化而改变大小。
考虑一个例子： 假设有一个很大的 FontAwesome 图标，您想要动态调整其大小（响应式图标）。
fa-random-icon{
font-size: clamp( 15rem, 80vw, 80vh)
}
例如:
如果在某个特定的移动屏幕尺寸中，80vw < 15rem，则字体大小为15rem。
如果屏幕太宽，则如果80vw > 80vh，则字体大小为80vh。
人们建议的那些方法总是有一点不确定的结果...就像当我们只使用
vw时，字体大小有时可能会太大或太小（无法界定）。
@media查询可以使用，但必须使用至少3个媒体查询才能使字体大小响应式。
body {
font-size: calc(0.75em + 1vmin);
}
media规范（这是[zurb]使用的方式）进行响应式样式设计：@media only screen and (max-width: 767px) {
h1 {
font-size: 3em;
}
h2 {
font-size: 2em;
}
}
如果您不介意使用jQuery解决方案，可以尝试TextFill插件。
jQuery TextFill将文本调整大小以适应容器，并使字体大小尽可能大。
有几种方法可以实现这一点。
使用媒体查询，但需要为多个断点设置字体大小：
body
{
font-size: 22px;
}
h1
{
font-size: 44px;
}
@media (min-width: 768)
{
body
{
font-size: 17px;
}
h1
{
font-size: 24px;
}
}
em中：
3.2vmax = Bigger of 3.2vw or 3.2vh
body
{
font-size: 3.2vw;
}
请查看CSS-Tricks...，并且也要看看Can I Use...。
还有一种响应式字体大小的方法 - 使用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;
}
}
为了使其在Internet Explorer 7和Internet Explorer 8中工作，您必须添加一个具有px单位的备选方案：
h1 {
font-size: 18px;
font-size: 1.125rem;
}
如果你正在使用 Less 进行开发，你可以创建一个 mixin 来为你执行计算。
Rem 单位支持 - http://caniuse.com/#feat=rem
在非常小的屏幕上，“vw”解决方案存在问题。您可以使用calc()设置基本大小并从那里开始逐步增加：
“vw”解决方案对于极小屏幕存在问题，可通过设置基础大小，并使用calc()进行逐步增加解决。
font-size: calc(16px + 0.4vw);
font-size: calc(1.2rem + 1vw)。这样我就可以使用非像素单位的优势（虽然这可能不适用于此处）。我还为旧浏览器提供了纯 ems 的备选方案。最后，由于在移动设备上字体有点小，我使用了媒体查询。这可能有点繁琐，但它似乎实现了我想要的效果。 - Evan Donovan我看到了一篇非常棒的文章来自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)));
}
line-height属性，以使其随着浏览器一起变化。body {
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}
css calc与rem和vw结合起来，以避免在极小/大尺寸时出现问题。主要是想让人们意识到rem避免了em的问题，从而简化了响应式解决方案（通过媒体查询减少重复）。并且使其不必依赖于SASS来实现此目的。 - ToolmakerSteverem来处理其他元素的工作。偶尔使用上面提到的calc。最重要的是避免重复的媒体查询，这些查询容易在进行更改时出现错误。 - ToolmakerSteve