css - 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 版式上 example page ， header 在压缩和扩展时适应浏览器。

我是否漏掉了一些非常明显的东西？我如何实现这一点？

Answer 1

您可以使用视口(viewport)值代替 ems、pxs 或 pts:

1vw = 1% of viewport width

1vh = 1% of viewport height

1vmin = 1vw or 1vh, whichever is smaller

1vmax = 1vw or 1vh, whichever is larger

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

来自 CSS 技巧: Viewport Sized Typography