我用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示例页面上，标题在压缩和展开时适应浏览器。
我是不是忽略了一些很明显的东西?我该如何做到这一点?
当前回答
我找到了这个解决方案，对我来说非常有效:
/* 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)));
}
其他回答
你可以使用viewport值代替ems, pxs或pts:
1vw =视口宽度的1% 1vh =视口高度的1% 1vmin = 1vw或1vh，取较小者 1vmax = 1vw或1vh，取较大者
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
来自CSS-Tricks:视口大小的排版
“大众”的解决方案在非常小的屏幕上有一个问题。你可以用calc()设置基础大小并从那里往上:
font-size: calc(16px + 0.4vw);
jQuery的“FitText”可能是最好的响应式头文件解决方案。在GitHub上查看: https://github.com/davatron5000/FitText.js
我刚刚提出了一个想法，每个元素只需定义一次字体大小，但它仍然受到媒体查询的影响。
首先，我设置变量“——text-scale-unit”为“1vh”或“1vw”，这取决于使用媒体查询的视口。
然后我使用calc()变量和我的字体大小乘数:
/* Define a variable based on the orientation. */ /* The value can be customized to fit your needs. */ @media (orientation: landscape) { :root{ --text-scale-unit: 1vh; } } @media (orientation: portrait) { :root { --text-scale-unit: 1vw; } } /* Use a variable with calc and multiplication. */ .large { font-size: calc(var(--text-scale-unit) * 20); } .middle { font-size: calc(var(--text-scale-unit) * 10); } .small { font-size: calc(var(--text-scale-unit) * 5); } .extra-small { font-size: calc(var(--text-scale-unit) * 2); } <span class="middle"> Responsive </span> <span class="large"> text </span> <span class="small"> with one </span> <span class="extra-small"> font-size tag. </span>
在我的例子中，我只使用了视口的方向，但是这个原则应该适用于任何媒体查询。
如果你不介意使用jQuery解决方案，你可以尝试TextFill插件
jQuery TextFill调整文本大小以适合容器，并使字体大小尽可能大。
https://github.com/jquery-textfill/jquery-textfill
