我已经使用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 unit - 等于初始包含块宽度的 1%。
vh unit - 等于初始包含块高度的 1%。
vmin 单位 - 等于 vw 或 vh 中的较小者。
vmax unit - 等于 vw 或 vh 中的较大者。
它们的使用方式与任何其他 CSS 值完全相同:
.text {
font-size: 3vw;
}
.other-text {
font-size: 5vh;
}
兼容性比较好,可以看这里。但是,某些版本的 Internet Explorer 和 Edge 不支持 vmax。此外,iOS 6 和 7 的 vh 单元存在问题,该问题已在 iOS 8 中修复。
怎么样
font-size: 1.5vw;
?更好的是,
font-size: calc(12px + 1vw)
@Dev_NIX 怎么样?
我喜欢@Cuzox 的提议——这正是我想要的
@Cuzox您应该将其作为答案提交,其他解决方案将测试方式缩小到能够将这些方法用于任何有用的事情。当你像这样组合一个静态高度时,它会很有用