我用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示例页面上，标题在压缩和展开时适应浏览器。
我是不是忽略了一些很明显的东西?我该如何做到这一点?
当前回答
我们可以使用css中的calc()
p{
font-size: calc(48px + (56 - 48) * ((100vw - 300px) / (1600 - 300))) !important;
}
数学公式为 Calc (minsize + (maxsize - minsize) * (100vm - minviewporttwidth) / (maxwidthviewoport - minviewporttwidth)))
Codepen
其他回答
我使用这些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);
}
“大众”的解决方案在非常小的屏幕上有一个问题。你可以用calc()设置基础大小并从那里往上:
font-size: calc(16px + 0.4vw);
响应式字体大小还有另一种方法——使用rem单位。
html {
/* Base font size */
font-size: 16px;
}
h1 {
font-size: 1.5rem;
}
h2 {
font-size: 1.2rem;
}
在稍后的媒体查询中，您可以通过更改基本字体大小来调整所有字体的大小:
@media screen and (max-width: 767px) {
html {
/* Reducing base font size will reduce all rem sizes */
font-size: 13px;
}
/* You can reduce font sizes manually as well */
h1 {
font-size: 1.2rem;
}
h2 {
font-size: 1.0rem;
}
}
为了让这个在ie7和ie8中工作，你必须添加一个以px为单位的回退:
h1 {
font-size: 18px;
font-size: 1.125rem;
}
如果您正在使用Less进行开发，您可以创建一个mixin，它将为您进行数学计算。
Rem单元支持- http://caniuse.com/#feat=rem
与许多框架一样，一旦你“离开网格”并覆盖框架的默认CSS，事情就会开始左右分裂。框架本质上是刚性的。如果你要使用Zurb的默认H1样式和默认网格类，那么网页应该在移动设备上正常显示(即响应式)。
然而，看起来你想要非常大的6.2em标题，这意味着文本将不得不缩小以适应纵向模式的移动显示。你最好的选择是使用响应文本jQuery插件，如FlowType和FitText。如果你想要一些轻量级的东西，那么你可以看看我的可伸缩文本jQuery插件:
http://thdoan.github.io/scalable-text/
示例用法:
<script>
$(document).ready(function() {
$('.row .twelve h1').scaleText();
}
</script>
响应式字体大小也可以用这个称为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 -使字体大小灵活。在响应式设计中使用这个插件，根据比例调整标题的大小。
