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

身体{ 字体大小:100% } /*报头*/ h1 { 字体大小:6.2 em; 粗细:500; } < div class = "行" > <div class="十二列text-center"> <h1> LARGE HEADER TAGLINE </h1> < / div > <!——结尾口号——> < / div > <!——结束行——>

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

我注意到,在Zurb Foundation 3 Typography示例页面上,标题在压缩和展开时适应浏览器。

我是不是忽略了一些很明显的东西?我该如何做到这一点?


当前回答

如果你正在使用一个构建工具,那么试试Rucksack。

否则,你可以使用CSS变量(自定义属性)来轻松控制最小和最大字体大小,就像这样(演示):

* {
  /* Calculation */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}

h1 {
  --max-size: 50;
  --min-size: 25;
  font-size: var(--responsive);
}

h2 {
  --max-size: 40;
  --min-size: 20;
  font-size: var(--responsive);
}

其他回答

我找到了这个解决方案,对我来说非常有效:

/* Fluid font size:
minimum font size at min. device width 300px = 14
maximum font size at max. device width 1600px = 26
*/

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

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

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

字体大小为3em,宽度为300像素和200像素。但你需要更低的字体大小为200px宽度,以实现完美的响应。

那么,真正的解决方案是什么?只有一个办法。您必须创建一个包含文本的PNG图像(具有透明背景)。之后,你可以很容易地让你的图像响应(例如:宽度:35%;高度:28 px)。通过这种方式,您的文本将与所有设备完全响应。

“大众”的解决方案在非常小的屏幕上有一个问题。你可以用calc()设置基础大小并从那里往上:

font-size: calc(16px + 0.4vw);

我在CSS-Tricks上看到一篇很棒的文章。它工作得很好:

body {
    font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw -
    [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

例如:

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

我们可以将相同的公式应用于行高属性,使它也随浏览器而改变。

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}

有很多答案,但我没有看到任何人提到与媒体查询相结合的最小或最大函数

在CSS中有一个max()函数,所以我们上面的例子变成了一行代码:

font-size: max(30vw, 30px);

或者用最小值和最大值加倍:

font-size: min(max(16px, 4vw), 22px);

这与:

font-size: clamp(16px, 4vw, 22px);

然后不要忘记将其包装在媒体查询中,并应用于您喜欢的h1,h2,h3,h4,h5,h6。

    @media (max-width: 600px) {
      h1 {
           font-size: clamp(16px, 4vw, 22px);
         }
    }