我用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示例页面上，标题在压缩和展开时适应浏览器。
我是不是忽略了一些很明显的东西?我该如何做到这一点?
当前回答
你可以使用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:视口大小的排版
其他回答
你可以使用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:视口大小的排版
字体大小的变化取决于屏幕大小使用CSS，你可以看到这个H1标签是有响应的。(如果我说错了请指正)
@media only screen和(max-width: 1000px) { h1 { 字体大小:5 em; ｝ ｝ @media only screen和(max-width: 500px) { h1 { 字体大小:3他们; ｝ ｝ @media only screen和(max-width: 300px) { h1 { 字体大小:2 em; ｝ ｝ @media only screen和(max-width: 100px) { h1 { 字体大小:1 em; ｝ ｝ 调整浏览器大小!< / h1 >
如果你不介意使用jQuery解决方案，你可以尝试TextFill插件
jQuery TextFill调整文本大小以适合容器，并使字体大小尽可能大。
https://github.com/jquery-textfill/jquery-textfill
关于字体大小的调整，恐怕没有任何简单的解决方案。您可以使用媒体查询更改字体大小，但从技术上讲，它不会平滑地调整大小。举个例子，如果你使用:
@media only screen and (max-width: 320px){font-size: 3em;}
字体大小为3em，宽度为300像素和200像素。但你需要更低的字体大小为200px宽度，以实现完美的响应。
那么，真正的解决方案是什么?只有一个办法。您必须创建一个包含文本的PNG图像(具有透明背景)。之后，你可以很容易地让你的图像响应(例如:宽度:35%;高度:28 px)。通过这种方式，您的文本将与所有设备完全响应。
在得出许多结论后，我最终得出了以下结论:
@media only screen and (max-width: 730px) {
h2 {
font-size: 4.3vw;
}
}
