我用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);
         }
    }

jQuery的“FitText”可能是最好的响应式头文件解决方案。在GitHub上查看: https://github.com/davatron5000/FitText.js

用这个等式:

calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));

对于大于或小于1440和768的任何值,您可以给它一个静态值,或者应用相同的方法。

vw解决方案的缺点是你不能设置缩放比例,比如在屏幕分辨率1440下的5vw最终可能是60px的字体大小,这是你的想法字体大小,但当你将窗口宽度缩小到768时,它可能最终是12px,而不是你想要的最小尺寸。

使用这种方法,您可以设置上边界和下边界,字体将在两者之间自行缩放。

你可以通过以下方法来实现这一点:

用rem表示例如2.3 rem 用em表示例如2.3em 用%表示2.3% 此外,你可以使用: Vh vw vmax vmin。

这些单元将根据屏幕的宽度和高度自动调整大小。

如果你正在使用一个构建工具,那么试试Rucksack。

否则,你可以使用CSS变量(自定义属性)来轻松控制最小和最大字体大小,就像这样(演示):

* {
  /* Calculation */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}

h1 {
  --max-size: 50;
  --min-size: 25;
  font-size: var(--responsive);
}

h2 {
  --max-size: 40;
  --min-size: 20;
  font-size: var(--responsive);
}