CSS中的响应式字体大小

Question

CSS中的响应式字体大小

cssresponsive-designzurb-foundationfont-size

442

我使用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排版示例页面上，标题会随着浏览器的压缩和扩展而自适应。

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

- user2213682

CSS的rem单位不会根据视口窗口动态调整大小。如果您需要这样做，则需要使用Javascript或以下纯CSS3答案之一。这只是在大标题文本上需要的东西。 - Evan Donovan

@ToolmakerSteve 这是一个非常幼稚的说法，特别是在跨所有设备响应的问题上。rem并不是一个很好的选择，你似乎只是因为它“复杂”而忽略了答案？ - Emobe

@Emobe - 我同意 - 我的评论过于简单。我目前不从事Web编程，但如果我从事，我可能会像Buzz的答案一样将css calc与rem和vw结合起来，以避免在极小/大尺寸时出现问题。主要是想让人们意识到rem避免了em的问题，从而简化了响应式解决方案（通过媒体查询减少重复）。并且使其不必依赖于SASS来实现此目的。 - ToolmakerSteve

@Emobe - csuwldcat的回答是一个很好的起点：使基础字体在所有情况下都保持合理大小可能会简化其他计算。通过使用几个媒体查询来微调基础（正文）大小可能就足够了；然后使用rem来处理其他元素的工作。偶尔使用上面提到的calc。最重要的是避免重复的媒体查询，这些查询容易在进行更改时出现错误。 - ToolmakerSteve

如果您根据宽度设置基础字体大小，字体大小似乎会变得响应式。嘭！ - Jovylle

34个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jason · Answer 1

使用CSS可以根据屏幕大小更改字体大小，您可以看到此H1标记是响应式的。（如果我错了，请纠正我）

@media only screen and (max-width: 1000px) {
     h1 {
         font-size:5em;
    }
}
 @media only screen and (max-width: 500px) {
     h1 {
         font-size: 3em;
    }
}
 @media only screen and (max-width: 300px) {
     h1 {
         font-size: 2em;
    }
}
 @media only screen and (max-width: 100px) {
     h1 {
         font-size: 1em;
    }
}

<h1>Resize the browser!</h1>

- Patrick Kelly · Answer 2

设置基础字体大小并使用clamp函数进行限制。

使用clamp()来设置字体大小，就像这些示例中一样，可以让您设置一个随着视口大小增长而增大的字体大小，但不会低于最小字体大小。

Clamp Method MDN Docs

以下是一个示例。

h1 { font-size: clamp(1.5em, 4vw, 2.5em); }
h2 { font-size: clamp(1.2em, 4vw, 2.4em); }
p  { font-size: clamp(0.6em, 4vw, 1.2em); }

- DMartin · Answer 3

这是对我有效的东西。我只在 iPhone 上测试了它。

无论您有 h1，h2 还是 p 标签，都将其放置在文本周围：

<h1><font size="5">The Text you want to make responsive</font></h1>

在桌面上呈现22pt字体，在iPhone上仍然可读。

<font size="5"></font>

- Asif Iqbal · Answer 4

关于字体大小调整，恐怕没有简单的解决方案。您可以使用媒体查询来更改字体大小，但从技术上讲，它不会平滑地调整大小。例如，如果您使用：

@media only screen and (max-width: 320px){font-size: 3em;}

你的font-size将在300像素和200像素宽度下都为3em。但是你需要在200像素宽度下降低font-size以实现完美响应。

那么，真正的解决方案是什么？只有一种方法。你必须创建一个PNG图像（带有透明背景），其中包含你的文本。之后，你可以轻松地使你的图像响应式（例如：width:35%; height:28px）。通过这种方式，你的文本将与所有设备完全响应。