CSS中的响应字体大小

Question

我使用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排版示例页面上，头适应浏览器的压缩和扩展。

我是不是错过了一些很明显的东西？我如何实现这一点？

Answer 1

您可以使用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-技巧：视区大小的排版

Answer 2

调整浏览器窗口的大小时，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中得到了解决。