我使用Zurb Foundation3网格创建了一个站点。每个页面都有一个大的h1:
null
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 -->null
当我将浏览器的大小调整为移动大小时，大字体不会调整，并导致浏览器包括一个水平滚动以适应大文本。
我注意到，在Zurb Foundation 3排版示例页面上，头适应浏览器的压缩和扩展。
我是不是错过了一些很明显的东西？我如何实现这一点？
调整浏览器窗口的大小时，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中得到了解决。
您可以使用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;
}
From CSS-技巧：视区大小的排版
