我已经创建了一个使用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排版example page上，页眉随着浏览器的压缩和扩展而调整.
我错过了什么明显的东西吗？我如何做到这一点？
调整浏览器窗口大小时，font-size不会这样响应.相反，它们会响应浏览器zoom /键入大小设置，例如在浏览器中同时按下键盘上的Ctrl和+.
Media Queries个
在开始 destruct 您的设计并创建滚动条的特定时间间隔，您必须考虑使用media queries来减小字体大小.
例如，try 将此代码添加到底部的CSS中，更改设计开始中断的位置的320像素宽度:
@media only screen and (max-width: 320px) {
body {
font-size: 2em;
}
}
Viewport percentage lengths
您也可以使用viewport percentage lengths，例如vw、vh、vmin和vmax.关于这一点的官方W3C文档声明:
视口百分比长度与初始包含块的大小有关.当初始包含块的高度或宽度更改时，它们将相应地zoom .
同样，根据同一W3C文档，每个单元可以定义如下:
大众单元-等于初始包含挡路的宽度的1%.
VH单位-等于初始容器挡路高度的1%.
Vmin单位-等于VW或VH中较小的一个.
Vmax单位-等于VW或VH中的较大者.
它们的使用方式与任何其他CSS值完全相同:
.text {
font-size: 3vw;
}
.other-text {
font-size: 5vh;
}
兼容性相对较好，可以看到here.不过，某些版本的Internet Explorer和Edge不支持VMAX.此外，iOS 6和7的VH单元存在问题，该问题已在iOS 8中修复.