我用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示例页面上,标题在压缩和展开时适应浏览器。

我是不是忽略了一些很明显的东西?我该如何做到这一点?


当前回答

关于字体大小的调整,恐怕没有任何简单的解决方案。您可以使用媒体查询更改字体大小,但从技术上讲,它不会平滑地调整大小。举个例子,如果你使用:

@media only screen and (max-width: 320px){font-size: 3em;}

字体大小为3em,宽度为300像素和200像素。但你需要更低的字体大小为200px宽度,以实现完美的响应。

那么,真正的解决方案是什么?只有一个办法。您必须创建一个包含文本的PNG图像(具有透明背景)。之后,你可以很容易地让你的图像响应(例如:宽度:35%;高度:28 px)。通过这种方式,您的文本将与所有设备完全响应。

其他回答

你可以使用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:视口大小的排版

响应式字体大小还有另一种方法——使用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

 h1 { font-size: 2.25em; } 
 h2 { font-size: 1.875em; }
 h3 { font-size: 1.5em; }
 h4 { font-size: 1.125em; }
 h5 { font-size: 0.875em; }
 h6 { font-size: 0.75em; }

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

这是对我有用的方法。我只在iPhone上进行了测试。

无论你有h1, h2或p标签,把它放在你的文本周围:

<h1><font size="5">The Text you want to make responsive</font></h1>

这将在桌面上呈现一个22pt的文本,在iPhone上仍然可读。

<font size="5"></font>