我用Zurb Foundation 3网格创建了一个网站。每个页面都有一个大的h1:
身体{ 字体大小:100% ｝ /*报头*/ h1 { 字体大小:6.2 em; 粗细:500; ｝ < div class = "行" > <div class="十二列text-center"> <h1> LARGE HEADER TAGLINE </h1> < / div > <！——结尾口号——> < / div > <！——结束行——>
当我将浏览器调整为移动尺寸时，大字体不会调整，并导致浏览器包含水平滚动以适应大文本。
我注意到，在Zurb Foundation 3 Typography示例页面上，标题在压缩和展开时适应浏览器。
我是不是忽略了一些很明显的东西?我该如何做到这一点?
当前回答
你可以使用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:视口大小的排版
其他回答
我一直在想办法克服这个问题，我相信我已经找到了一个解决方案:
如果您可以为Internet Explorer 9(及更高版本)和所有其他支持CSS calc()、rem单元和vmin单元的现代浏览器编写应用程序。你可以使用它来实现可伸缩的文本，而不需要媒体查询:
body {
font-size: calc(0.75em + 1vmin);
}
这里是它的行动:http://codepen.io/csuwldcat/pen/qOqVNO
在调整浏览器窗口大小时，字体大小不会像这样响应。相反，它们会对浏览器的缩放/类型大小设置做出响应，比如在浏览器中同时按下键盘上的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中的calc()
p{
font-size: calc(48px + (56 - 48) * ((100vw - 300px) / (1600 - 300))) !important;
}
数学公式为 Calc (minsize + (maxsize - minsize) * (100vm - minviewporttwidth) / (maxwidthviewoport - minviewporttwidth)))
Codepen
你可以使用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:视口大小的排版
这是对我有用的方法。我只在iPhone上进行了测试。
无论你有h1, h2或p标签，把它放在你的文本周围:
<h1><font size="5">The Text you want to make responsive</font></h1>
这将在桌面上呈现一个22pt的文本，在iPhone上仍然可读。
<font size="5"></font>
