CSS中的响应式字体大小

Question

我使用 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 Typography 示例页面上，标题会在压缩和扩展时适应浏览器。

我错过了一些非常明显的东西吗？我如何实现这一目标？

原文由 user2213682 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

调整浏览器窗口大小时， font-size 不会这样响应。相反，它们会响应浏览器缩放/字体大小设置，例如，如果您在浏览器中同时按键盘上的 Ctrl 和 + 。

媒体查询

您将不得不考虑使用 媒体查询 以在某些间隔开始破坏您的设计并创建滚动条时减小字体大小。

例如，尝试在底部的 CSS 中添加它，更改 320 像素的宽度，以适应您的设计开始中断的位置：

 @media only screen and (max-width: 320px) {

   body {
      font-size: 2em;
   }

}

视口百分比长度

You can also use viewport percentage lengths such as vw , vh , vmin and vmax .官方的 W3C 文档指出：

视口百分比长度与初始包含块的大小有关。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。

同样，从同一个 W3C 文档中，每个单独的单元都可以定义如下：

vw unit - 等于初始包含块宽度的 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 中修复。

原文由 Peter Featherstone 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以使用视口值代替 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： Viewport Sized Typography

原文由 Desolator 发布，翻译遵循 CC BY-SA 4.0 许可协议