CSS中的自适应字体大小
我已经使用 Zurb Foundation 3 网格创建了一个站点。每个页面都有一个大的h1
:
body {
font-size: 100%
}
/* Headers */
h1 {
font-size: 6.2em;
font-weight: 500;
}
<div class="row">
<div class="twelve columns text-center">
<h1> LARGE HEADER TAGLINE </h1>
</div>
<!-- End Tagline -->
</div>
<!-- End Row -->
当我将浏览器调整为移动大小时,大字体不会调整,并导致浏览器包含水平滚动条以适应大文本。
我注意到在 Zurb Foundation 3 Typography示例页面上,标题在压缩和扩展时适应浏览器。
我是否真的缺少明显的东西?我该如何实现?
-
在
font- size
调整浏览器窗口时,就不会这样回应。相反,它们会响应浏览器的缩放/类型大小设置,例如,当您在浏览器中同时按下键盘上的Ctrl
和+
时。媒体查询
您将不得不考虑使用媒体查询来按一定的间隔减小字体大小,从而开始破坏设计并创建滚动条。
例如,尝试将其添加到底部的CSS内,在设计开始中断的任何地方更改320像素的宽度:
@media only screen and (max-width: 320px) { body { font-size: 2em; } }
视口百分比长度
您还可以使用视口百分比长度,例如
vw
,vh
,vmin
和vmax
。W3C的官方文档指出:视口百分比长度相对于初始包含块的大小。更改初始包含块的高度或宽度时,将对其进行相应缩放。
同样,可以从同一W3C文档中定义每个单独的单元,如下所示:
vw单位-等于初始包含块的宽度的1%。
vh单位-等于初始包含块的高度的1%。
vmin单位-等于vw或vh中的较小者。
vmax单位-等于vw或vh中的较大者。
它们的使用方式与任何其他CSS值完全相同:
.text { font-size: 3vw; } .other-text { font-size: 5vh; }
兼容性是比较好的可以看出这里。但是,某些版本的InternetExplorer和Edge不支持vmax。此外,iOS 6和7的vh单元存在问题,已在iOS 8中修复。