CSS中的自适应字体大小 [英] Responsive font size in CSS

问题描述

我已经使用 Zurb Foundation 3 网格创建了一个网站.每个页面都有一个大的h1:

I've created a site using the Zurb Foundation 3 grid. Each page has a large 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.

我注意到，在 Zurb Foundation 3 版式示例页面，标题会随着浏览器的压缩和扩展而适应.

I've noticed that on the Zurb Foundation 3 Typography example page, the headers adapt to the browser as it is compressed and expanded.

我想念一些确实很明显的东西吗?我该如何实现?

Am I missing something really obvious? How do I achieve this?

推荐答案

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

The font-size won't respond like this when resizing the browser window. 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.

媒体查询

您将不得不考虑使用媒体查询来减小字体大小每隔一定的时间，它就会开始破坏您的设计并创建滚动条.

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.

例如，尝试将其添加到底部的CSS内，在设计开始中断的地方更改320像素的宽度:

For example, try adding this inside your CSS at the bottom, changing the 320 pixels width for wherever your design starts breaking:

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

   body { 
      font-size: 2em; 
   }

}

视口百分比长度

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

You can also use viewport percentage lengths such as vw, vh, vmin and vmax. The official W3C document for this states:

视口百分比长度相对于初始包含块的大小.更改初始包含块的高度或宽度时，将对其进行相应缩放.

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.

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

Again, from the same W3C document each individual unit can be defined as below:

vw单位-等于初始包含块的宽度的1％.

vw unit - Equal to 1% of the width of the initial containing block.

vh单位-等于初始包含块的高度的1％.

vh unit - Equal to 1% of the height of the initial containing block.

vmin单位-等于vw或vh中的较小者.

vmin unit - Equal to the smaller of vw or vh.

vmax单位-等于vw或vh中的较大者.

vmax unit - Equal to the larger of vw or vh.

它们的使用方式与任何其他CSS值完全相同:

And they are used in exactly the same way as any other CSS value:

.text {
  font-size: 3vw;
}

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

在此处可以看出，兼容性相对较好.但是，某些版本的Internet Explorer和Edge不支持vmax.另外，iOS 6和7的vh单元存在问题，已在iOS 8中修复.

Compatibility is relatively good as can be seen here. However, some versions of Internet Explorer and Edge don’t support vmax. Also, iOS 6 and 7 have an issue with the vh unit, which was fixed in iOS 8.

这篇关于CSS中的自适应字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！