CSS中的自适应字体大小

本文翻译自：Responsive font size in CSS

I've created a site using the Zurb Foundation 3 grid. 我已经使用Zurb Foundation 3网格创建了一个站点。 Each page has a large h1 : 每个页面都有一个很大的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 --> 

When I resize the browser to mobile size the large font doesn't adjust and causes the browser to include a horizontal scroll to accommodate for the large text. 当我将浏览器调整为移动大小时，大字体不会调整，并导致浏览器包含水平滚动条以适应大文本。

I've noticed that on the Zurb Foundation 3 Typography example page , the headers adapt to the browser as it is compressed and expanded. 我注意到在Zurb Foundation 3 Typography 示例页面上 ，标题在压缩和扩展时适应浏览器。

Am I missing something really obvious? 我是否真的缺少明显的东西？ How do I achieve this? 我该如何实现？

---

#1楼

参考：https://stackoom.com/question/13f5A/CSS中的自适应字体大小

---

#2楼

The font-size won't respond like this when resizing the browser window. 调整浏览器窗口大小时， font-size不会像这样响应。 Instead they respond to the browser zoom/type size settings, such as if you press Ctrl and + together on the keyboard while in the browser. 相反，它们会响应浏览器的缩放/类型大小设置，例如，当您在浏览器中同时按下键盘上的Ctrl和+时。

Media Queries 媒体查询

You would have to look at using media queries to reduce the font-size at certain intervals where it starts breaking your design and creating scrollbars. 您将不得不考虑使用媒体查询来按一定的间隔减小字体大小，从而开始破坏设计并创建滚动条。

For example, try adding this inside your CSS at the bottom, changing the 320 pixels width for wherever your design starts breaking: 例如，尝试将其添加到底部的CSS内，在设计开始中断的任何地方更改320像素的宽度：

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

   body { 
      font-size: 2em; 
   }

}

Viewport percentage lengths 视口百分比长度

You can also use viewport percentage lengths such as vw , vh , vmin and vmax . 您还可以使用视口百分比长度，例如vw ， vh ， vmin和vmax 。 The official W3C document for this states: W3C的官方文档指出：

The viewport-percentage lengths are relative to the size of the initial containing block. 视口百分比长度相对于初始包含块的大小。 When the height or width of the initial containing block is changed, they are scaled accordingly. 更改初始包含块的高度或宽度时，将对其进行相应缩放。

Again, from the same W3C document each individual unit can be defined as below: 同样，可以从同一W3C文档中定义每个单独的单元，如下所示：

vw unit - Equal to 1% of the width of the initial containing block. vw单位-等于初始包含块的宽度的1％。

vh unit - Equal to 1% of the height of the initial containing block. vh单位-等于初始包含块的高度的1％。

vmin unit - Equal to the smaller of vw or vh. vmin单位-等于vw或vh中的较小者。

vmax unit - Equal to the larger of vw or vh. vmax单位-等于vw或vh中的较大者。

And they are used in exactly the same way as any other CSS value: 它们的使用方式与任何其他CSS值完全相同：

.text {
  font-size: 3vw;
}

.other-text {
  font-size: 5vh;
}

Compatibility is relatively good as can be seen here . 兼容性是比较好的可以看出这里 。 However, some versions of Internet Explorer and Edge don't support vmax. 但是，某些版本的Internet Explorer和Edge不支持vmax。 Also, iOS 6 and 7 have an issue with the vh unit, which was fixed in iOS 8. 此外，iOS 6和7的vh单元存在问题，已在iOS 8中修复。

---

#3楼

Use CSS media specifiers (that's what they [zurb] use) for responsive styling: 使用CSS media说明符（即[zurb]所使用的）进行响应式样式：

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

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}

---

#4楼

If you don't mind to use a jQuery solution you can try TextFill plugin 如果您不介意使用jQuery解决方案，则可以尝试使用TextFill插件

jQuery TextFill resizes text to fit into a container and makes font size as big as possible. jQuery TextFill调整文本大小以适合容器，并使字体大小尽可能大。

https://github.com/jquery-textfill/jquery-textfill https://github.com/jquery-textfill/jquery-textfill

---

#5楼

You can use the viewport value instead of ems, pxs, or pts: 您可以使用视口值代替ems，pxs或pts：

1vw = 1% of viewport width 1vw =视口宽度的1％

1vh = 1% of viewport height 1vh =视口高度的1％

1vmin = 1vw or 1vh, whichever is smaller 1vmin = 1vw或1vh，以较小者为准

1vmax = 1vw or 1vh, whichever is larger 1vmax = 1vw或1vh，以较大者为准

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

From CSS-Tricks: Viewport Sized Typography 从CSS技巧： 视口大小的版式

---

#6楼

jQuery's "FitText" is probably the best responsive header solution. jQuery的“ FitText”可能是最佳的响应头解决方案。 Check it out at GitHub: https://github.com/davatron5000/FitText.js 在GitHub上检查一下： https : //github.com/davatron5000/FitText.js