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

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

Answer 1

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

媒体查询

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

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

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

   body { 
      font-size: 2em; 
   }

}

视口百分比长度

您还可以使用视口百分比长度，例如vw、和。官方的 W3C 文档指出：vh``vmin``vmax

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

同样，从同一个 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 中修复。