我用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示例页面上，标题在压缩和展开时适应浏览器。
我是不是忽略了一些很明显的东西?我该如何做到这一点?
当前回答
试着在你的样式表中包含以下内容:
html {
font-size: min(max(16px, 4vw), 22px);
}
更多信息请访问https://css-tricks.com/simplified-fluid-typography/
其他回答
h1{
font-size : clamp(2rem, 10vw, 5rem);
}
这里clamp有三个参数。
第一个是允许的最小字体大小。 第三个是允许的最大字体大小。 第二个参数是您希望始终具有的font-size。它的单位必须是相对的(vw, vh, ch)，而不是绝对的(i。E不是px mm pt)相对单元将使它改变其大小W.R.T变化的屏幕尺寸。
举个例子: 假设有一个很大的fontawesome图标，您想动态调整它的大小(响应式图标)
fa-random-icon{
font-size: clamp( 15rem, 80vw, 80vh)
}
这里80vw是首选的字体大小。 15雷姆是最小字体大小(下界)。 80vh是最大字体大小(上限)。
i.e.
如果在特定的移动屏幕尺寸中，如果80vw < 15rem，则字体大小为15rem。 如果屏幕太宽，那么如果80vw > 80vh，那么字体大小是80vh。
人们提出的上述方法往往效果不确定。就像我们只使用vw时，字体大小有时可能太大或太小(无界)。
@media查询可以使用，但你必须使用至少3个媒体查询，使字体大小响应
如果在vw(视口宽度)中定义字体大小，则可以使字体大小具有响应性。然而，并非所有浏览器都支持它。解决方案是使用JavaScript根据浏览器宽度更改基本字体大小，并以%为单位设置所有字体大小。
下面是一篇描述如何制作响应式字体大小的文章:http://wpsalt.com/responsive-font-size-in-wordpress-theme/
设置你的基本字体大小和夹钳功能。
使用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);
}
我使用这些CSS类，它们使我的文本在任何屏幕大小上都是流动的:
.h1-fluid {
font-size: calc(1rem + 3vw);
line-height: calc(1.4rem + 4.8vw);
}
.h2-fluid {
font-size: calc(1rem + 2vw);
line-height: calc(1.4rem + 2.4vw);
}
.h3-fluid {
font-size: calc(1rem + 1vw);
line-height: calc(1.4rem + 1.2vw);
}
.p-fluid {
font-size: calc(1rem + 0.5vw);
line-height: calc(1.4rem + 0.6vw);
}
我们可以使用css中的calc()
p{
font-size: calc(48px + (56 - 48) * ((100vw - 300px) / (1600 - 300))) !important;
}
数学公式为 Calc (minsize + (maxsize - minsize) * (100vm - minviewporttwidth) / (maxwidthviewoport - minviewporttwidth)))
Codepen
