我用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示例页面上，标题在压缩和展开时适应浏览器。
我是不是忽略了一些很明显的东西?我该如何做到这一点?
当前回答
我在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)));
}
其他回答
我一直在想办法克服这个问题，我相信我已经找到了一个解决方案:
如果您可以为Internet Explorer 9(及更高版本)和所有其他支持CSS calc()、rem单元和vmin单元的现代浏览器编写应用程序。你可以使用它来实现可伸缩的文本，而不需要媒体查询:
body {
font-size: calc(0.75em + 1vmin);
}
这里是它的行动:http://codepen.io/csuwldcat/pen/qOqVNO
响应式字体大小还有另一种方法——使用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
文本大小可以用vw单位设置，这意味着“视口宽度”。这样，文本大小将跟随浏览器窗口的大小:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_text
在我的个人项目中，我使用vw和@meida。它工作得很完美。
.mText {
font-size: 6vw;
}
@media only screen and (max-width: 1024px) {
.mText {
font-size: 10vw;
}
}
.sText {
font-size: 4vw;
}
@media only screen and (max-width: 1024px) {
.sText {
font-size: 7vw;
}
}
你可以使用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:视口大小的排版
如果你不介意使用jQuery解决方案，你可以尝试TextFill插件
jQuery TextFill调整文本大小以适合容器，并使字体大小尽可能大。
https://github.com/jquery-textfill/jquery-textfill
