CSS 中的响应式字体大小 [英] Responsive font size in CSS

问题描述

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

body {字体大小:100%}/* 标题 */h1{字体大小:6.2em；字体粗细:500；}

<div class="12 列文本中心"><h1>大标题标语 </h1>
<!-- 结束标语 -->

<!-- 结束行-->

当我将浏览器调整为移动尺寸时，大字体不会调整并导致浏览器包含水平滚动以适应大文本.

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

我是否遗漏了一些非常明显的东西?我如何实现这一目标?

解决方案

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

媒体查询

您必须考虑使用媒体查询来减小字体大小在某些时间间隔，它开始破坏您的设计并创建滚动条.

例如，尝试将其添加到 CSS 底部的底部，更改 320 像素宽度以适应您的设计开始损坏的位置:

@media only screen and (max-width: 320px) {身体 {字体大小:2em；}}

视口百分比长度

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

<块引用>

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

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

<块引用>

vw unit - 等于初始包含块宽度的 1%.

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

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

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

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

.text {字体大小:3vw；}.other-text {字体大小:5vh；}

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

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.

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?

解决方案

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.

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:

@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. 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.

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

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

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

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

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

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

.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. Also, iOS 6 and 7 have an issue with the vh unit, which was fixed in iOS 8.

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