我用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>
其他回答
你可以使用viewport值代替ems, pxs或pts:
1vw =视口宽度的1% 1vh =视口高度的1% 1vmin = 1vw或1vh，取较小者 1vmax = 1vw或1vh，取较大者
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
来自CSS-Tricks:视口大小的排版
解决文本在台式机和移动/平板电脑上都好看的问题的一种方法是将文本大小固定为物理单位，如物理厘米或英寸，这与屏幕PPI(每英寸点数)无关。
基于这个答案，下面是我在HTML文档末尾使用的响应式字体大小的代码:
<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>
<script type='text/javascript'>
var devicePixelRatio = window.devicePixelRatio || 1;
dpi_x = document.getElementById('testdiv').offsetWidth * devicePixelRatio;
dpi_y = document.getElementById('testdiv').offsetHeight * devicePixelRatio;
function setFontSizeForClass(className, fontSize) {
var elms = document.getElementsByClassName(className);
for(var i=0; i<elms.length; i++) {
elms[i].style.fontSize = String(fontSize * dpi_y / 96) + "px";
}
}
setFontSizeForClass('h1-font-size', 30);
setFontSizeForClass('action-font-size', 20);
setFontSizeForClass('guideline-font-size', 25);
// etc for your different classes
</script>
在上面的代码中，不同类别的项目以物理单位分配字体大小，只要浏览器/OS为其屏幕的PPI正确配置。
物理单位字体总是不太大也不太小，只要到屏幕的距离是正常的(阅读书籍的距离)。
与许多框架一样，一旦你“离开网格”并覆盖框架的默认CSS，事情就会开始左右分裂。框架本质上是刚性的。如果你要使用Zurb的默认H1样式和默认网格类，那么网页应该在移动设备上正常显示(即响应式)。
然而，看起来你想要非常大的6.2em标题，这意味着文本将不得不缩小以适应纵向模式的移动显示。你最好的选择是使用响应文本jQuery插件，如FlowType和FitText。如果你想要一些轻量级的东西，那么你可以看看我的可伸缩文本jQuery插件:
http://thdoan.github.io/scalable-text/
示例用法:
<script>
$(document).ready(function() {
$('.row .twelve h1').scaleText();
}
</script>
我在CSS-Tricks上看到一篇很棒的文章。它工作得很好:
body {
font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw -
[minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}
例如:
body {
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}
我们可以将相同的公式应用于行高属性，使它也随浏览器而改变。
body {
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}
这是对我有用的方法。我只在iPhone上进行了测试。
无论你有h1, h2或p标签，把它放在你的文本周围:
<h1><font size="5">The Text you want to make responsive</font></h1>
这将在桌面上呈现一个22pt的文本，在iPhone上仍然可读。
<font size="5"></font>
