我用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示例页面上，标题在压缩和展开时适应浏览器。
我是不是忽略了一些很明显的东西?我该如何做到这一点?
当前回答
这是对我有用的方法。我只在iPhone上进行了测试。
无论你有h1, h2或p标签，把它放在你的文本周围:
<h1><font size="5">The Text you want to make responsive</font></h1>
这将在桌面上呈现一个22pt的文本，在iPhone上仍然可读。
<font size="5"></font>
其他回答
有很多答案，但我没有看到任何人提到与媒体查询相结合的最小或最大函数
在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);
}
}
响应式字体大小也可以用这个称为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 -使字体大小灵活。在响应式设计中使用这个插件，根据比例调整标题的大小。
我们可以使用css中的calc()
p{
font-size: calc(48px + (56 - 48) * ((100vw - 300px) / (1600 - 300))) !important;
}
数学公式为 Calc (minsize + (maxsize - minsize) * (100vm - minviewporttwidth) / (maxwidthviewoport - minviewporttwidth)))
Codepen
我一直在想办法克服这个问题，我相信我已经找到了一个解决方案:
如果您可以为Internet Explorer 9(及更高版本)和所有其他支持CSS calc()、rem单元和vmin单元的现代浏览器编写应用程序。你可以使用它来实现可伸缩的文本，而不需要媒体查询:
body {
font-size: calc(0.75em + 1vmin);
}
这里是它的行动:http://codepen.io/csuwldcat/pen/qOqVNO
你可以通过以下方法来实现这一点:
用rem表示例如2.3 rem 用em表示例如2.3em 用%表示2.3% 此外，你可以使用: Vh vw vmax vmin。
这些单元将根据屏幕的宽度和高度自动调整大小。
