我用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示例页面上，标题在压缩和展开时适应浏览器。
我是不是忽略了一些很明显的东西?我该如何做到这一点?
当前回答
我一直在想办法克服这个问题，我相信我已经找到了一个解决方案:
如果您可以为Internet Explorer 9(及更高版本)和所有其他支持CSS calc()、rem单元和vmin单元的现代浏览器编写应用程序。你可以使用它来实现可伸缩的文本，而不需要媒体查询:
body {
font-size: calc(0.75em + 1vmin);
}
这里是它的行动:http://codepen.io/csuwldcat/pen/qOqVNO
其他回答
这是对我有用的方法。我只在iPhone上进行了测试。
无论你有h1, h2或p标签，把它放在你的文本周围:
<h1><font size="5">The Text you want to make responsive</font></h1>
这将在桌面上呈现一个22pt的文本，在iPhone上仍然可读。
<font size="5"></font>
这部分在foundation 5中实现。
在文件_type中。SCSS有两组头变量:
// We use these to control header font sizes
// for medium screens and above
$h1-font-size: rem-calc(44) !default;
$h2-font-size: rem-calc(37) !default;
$h3-font-size: rem-calc(27) !default;
$h4-font-size: rem-calc(23) !default;
$h5-font-size: rem-calc(18) !default;
$h6-font-size: 1rem !default;
// We use these to control header size reduction on small screens
$h1-font-reduction: rem-calc(10) !default;
$h2-font-reduction: rem-calc(10) !default;
$h3-font-reduction: rem-calc(5) !default;
$h4-font-reduction: rem-calc(5) !default;
$h5-font-reduction: 0 !default;
$h6-font-reduction: 0 !default;
对于medium up，它们根据第一组变量生成大小:
@media #{$medium-up} {
h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
h1 { font-size: $h1-font-size; }
h2 { font-size: $h2-font-size; }
h3 { font-size: $h3-font-size; }
h4 { font-size: $h4-font-size; }
h5 { font-size: $h5-font-size; }
h6 { font-size: $h6-font-size; }
}
对于default-i。在小屏幕上，他们使用第二组变量来生成CSS:
h1 { font-size: $h1-font-size - $h1-font-reduction; }
h2 { font-size: $h2-font-size - $h2-font-reduction; }
h3 { font-size: $h3-font-size - $h3-font-reduction; }
h4 { font-size: $h4-font-size - $h4-font-reduction; }
h5 { font-size: $h5-font-size - $h5-font-reduction; }
h6 { font-size: $h6-font-size - $h6-font-reduction; }
您可以使用这些变量并在自定义scss文件中重写，为各自的屏幕大小设置字体大小。
关于字体大小的调整，恐怕没有任何简单的解决方案。您可以使用媒体查询更改字体大小，但从技术上讲，它不会平滑地调整大小。举个例子，如果你使用:
@media only screen and (max-width: 320px){font-size: 3em;}
字体大小为3em，宽度为300像素和200像素。但你需要更低的字体大小为200px宽度，以实现完美的响应。
那么，真正的解决方案是什么?只有一个办法。您必须创建一个包含文本的PNG图像(具有透明背景)。之后，你可以很容易地让你的图像响应(例如:宽度:35%;高度:28 px)。通过这种方式，您的文本将与所有设备完全响应。
有很多答案，但我没有看到任何人提到与媒体查询相结合的最小或最大函数
在CSS中有一个max()函数，所以我们上面的例子变成了一行代码:
font-size: max(30vw, 30px);
或者用最小值和最大值加倍:
font-size: min(max(16px, 4vw), 22px);
这与:
font-size: clamp(16px, 4vw, 22px);
然后不要忘记将其包装在媒体查询中，并应用于您喜欢的h1,h2,h3,h4,h5,h6。
@media (max-width: 600px) {
h1 {
font-size: clamp(16px, 4vw, 22px);
}
}
与许多框架一样，一旦你“离开网格”并覆盖框架的默认CSS，事情就会开始左右分裂。框架本质上是刚性的。如果你要使用Zurb的默认H1样式和默认网格类，那么网页应该在移动设备上正常显示(即响应式)。
然而，看起来你想要非常大的6.2em标题，这意味着文本将不得不缩小以适应纵向模式的移动显示。你最好的选择是使用响应文本jQuery插件，如FlowType和FitText。如果你想要一些轻量级的东西，那么你可以看看我的可伸缩文本jQuery插件:
http://thdoan.github.io/scalable-text/
示例用法:
<script>
$(document).ready(function() {
$('.row .twelve h1').scaleText();
}
</script>
