我用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(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));
对于大于或小于1440和768的任何值，您可以给它一个静态值，或者应用相同的方法。
vw解决方案的缺点是你不能设置缩放比例，比如在屏幕分辨率1440下的5vw最终可能是60px的字体大小，这是你的想法字体大小，但当你将窗口宽度缩小到768时，它可能最终是12px，而不是你想要的最小尺寸。
使用这种方法，您可以设置上边界和下边界，字体将在两者之间自行缩放。
其他回答
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; }
如果你正在使用一个构建工具，那么试试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);
}
使用CSS媒体说明符(这是他们[zurb]使用的)来进行响应式样式:
@media only screen and (max-width: 767px) {
h1 {
font-size: 3em;
}
h2 {
font-size: 2em;
}
}
试着在你的样式表中包含以下内容:
html {
font-size: min(max(16px, 4vw), 22px);
}
更多信息请访问https://css-tricks.com/simplified-fluid-typography/
在调整浏览器窗口大小时，字体大小不会像这样响应。相反，它们会对浏览器的缩放/类型大小设置做出响应，比如在浏览器中同时按下键盘上的Ctrl和+。
媒体查询
你必须考虑使用媒体查询来减少字体大小在特定的时间间隔，它开始破坏你的设计和创建滚动条。
例如，试着在你的CSS底部添加这个，在你的设计开始中断的地方改变320像素的宽度:
@media only screen and (max-width: 320px) {
body {
font-size: 2em;
}
}
视口百分比长度
你也可以使用视口百分比长度，如vw, vh, vmin和vmax。官方W3C文档声明:
viewport-percentage长度相对于初始包含块的大小。当初始包含块的高度或宽度发生变化时，它们将相应地缩放。
同样，从同一W3C文档中，每个单独的单元可以定义如下:
vw单位-等于初始包含块宽度的1%。 vh单位-等于初始包含块高度的1%。 vmin单位-等于vw或vh中较小者。 vmax单位-等于vw或vh中较大的一个。
它们的使用方式与其他CSS值完全相同:
.text {
font-size: 3vw;
}
.other-text {
font-size: 5vh;
}
从这里可以看出，兼容性相对较好。但是，某些版本的ie浏览器和Edge浏览器不支持vmax。此外，iOS 6和7的vh单位也有问题，这在iOS 8中得到了修复。
