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

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


当前回答

我一直在想办法克服这个问题,我相信我已经找到了一个解决方案:

如果您可以为Internet Explorer 9(及更高版本)和所有其他支持CSS calc()、rem单元和vmin单元的现代浏览器编写应用程序。你可以使用它来实现可伸缩的文本,而不需要媒体查询:

body {
  font-size: calc(0.75em + 1vmin);
}

这里是它的行动:http://codepen.io/csuwldcat/pen/qOqVNO

其他回答

与许多框架一样,一旦你“离开网格”并覆盖框架的默认CSS,事情就会开始左右分裂。框架本质上是刚性的。如果你要使用Zurb的默认H1样式和默认网格类,那么网页应该在移动设备上正常显示(即响应式)。

然而,看起来你想要非常大的6.2em标题,这意味着文本将不得不缩小以适应纵向模式的移动显示。你最好的选择是使用响应文本jQuery插件,如FlowType和FitText。如果你想要一些轻量级的东西,那么你可以看看我的可伸缩文本jQuery插件:

http://thdoan.github.io/scalable-text/

示例用法:

<script>
$(document).ready(function() {
  $('.row .twelve h1').scaleText();
}
</script>

我一直在想办法克服这个问题,我相信我已经找到了一个解决方案:

如果您可以为Internet Explorer 9(及更高版本)和所有其他支持CSS calc()、rem单元和vmin单元的现代浏览器编写应用程序。你可以使用它来实现可伸缩的文本,而不需要媒体查询:

body {
  font-size: calc(0.75em + 1vmin);
}

这里是它的行动:http://codepen.io/csuwldcat/pen/qOqVNO

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

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

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

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

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

字体大小的变化取决于屏幕大小使用CSS,你可以看到这个H1标签是有响应的。(如果我说错了请指正)

@media only screen和(max-width: 1000px) { h1 { 字体大小:5 em; } } @media only screen和(max-width: 500px) { h1 { 字体大小:3他们; } } @media only screen和(max-width: 300px) { h1 { 字体大小:2 em; } } @media only screen和(max-width: 100px) { h1 { 字体大小:1 em; } } 调整浏览器大小!< / h1 >

文本大小可以用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;
    }
}