我用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示例页面上,标题在压缩和展开时适应浏览器。
我是不是忽略了一些很明显的东西?我该如何做到这一点?
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个媒体查询,使字体大小响应
响应式字体大小也可以用这个称为FlowType的JavaScript代码完成:
http://simplefocus.com/flowtype/
https://github.com/simplefocus/FlowType.JS
FlowType -响应式网页排版在其最好的:字体大小基于元素宽度。
或者这个叫做FitText的JavaScript代码:
http://fittextjs.com/
https://github.com/davatron5000/FitText.js
FitText -使字体大小灵活。在响应式设计中使用这个插件,根据比例调整标题的大小。