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

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


当前回答

如果在vw(视口宽度)中定义字体大小,则可以使字体大小具有响应性。然而,并非所有浏览器都支持它。解决方案是使用JavaScript根据浏览器宽度更改基本字体大小,并以%为单位设置所有字体大小。

下面是一篇描述如何制作响应式字体大小的文章:http://wpsalt.com/responsive-font-size-in-wordpress-theme/

其他回答

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

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

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

示例用法:

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

试着在你的样式表中包含以下内容:

html {
  font-size: min(max(16px, 4vw), 22px);
}

更多信息请访问https://css-tricks.com/simplified-fluid-typography/

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

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

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

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

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

在得出许多结论后,我最终得出了以下结论:

@media only screen and (max-width: 730px) {

    h2 {
        font-size: 4.3vw;
    }
}

如果在vw(视口宽度)中定义字体大小,则可以使字体大小具有响应性。然而,并非所有浏览器都支持它。解决方案是使用JavaScript根据浏览器宽度更改基本字体大小,并以%为单位设置所有字体大小。

下面是一篇描述如何制作响应式字体大小的文章:http://wpsalt.com/responsive-font-size-in-wordpress-theme/