响应字体大小 [英] Responsive Font Size

问题描述

我使用Zurb Foundation 3网格创建了一个网站。每一页都有一个大的h1。

I've created a site using the Zurb Foundation 3 grid. Each page has a large h1.

CSS

body {font-size:100%}
/* Headers */
h1 { font-size:6.2em;font-weight:500; }

HTML

<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 accomodate 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?

推荐答案

恐怕不能像你在这里想的那样工作。

I'm afraid that doesn't work as you are thinking here.

在调整浏览器窗口大小时， 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 320px width for wherever your design starts breaking:

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

   body { font-size: 2em; }

}

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