我用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示例页面上,标题在压缩和展开时适应浏览器。

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


当前回答

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

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

其他回答

 h1 { font-size: 2.25em; } 
 h2 { font-size: 1.875em; }
 h3 { font-size: 1.5em; }
 h4 { font-size: 1.125em; }
 h5 { font-size: 0.875em; }
 h6 { font-size: 0.75em; }

如果在vw(视口宽度)中定义字体大小,则可以使字体大小具有响应性。然而,并非所有浏览器都支持它。解决方案是使用JavaScript根据浏览器宽度更改基本字体大小,并以%为单位设置所有字体大小。

下面是一篇描述如何制作响应式字体大小的文章:http://wpsalt.com/responsive-font-size-in-wordpress-theme/

我们可以使用css中的calc()

p{
font-size: calc(48px + (56 - 48) * ((100vw - 300px) / (1600 - 300))) !important;
}

数学公式为 Calc (minsize + (maxsize - minsize) * (100vm - minviewporttwidth) / (maxwidthviewoport - minviewporttwidth)))

Codepen

设置你的基本字体大小和夹钳功能。

使用clamp()来设置字体大小,就像在这些例子中一样,允许您设置一个随视口大小而增长的字体大小,但不会低于最小字体大小

夹钳方法MDN文档

这里有一个例子。

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);
}

如果你不介意使用jQuery解决方案,你可以尝试TextFill插件

jQuery TextFill调整文本大小以适合容器,并使字体大小尽可能大。

https://github.com/jquery-textfill/jquery-textfill