0

我正在尝试使用FitText将页面上的主 h1 调整为响应式站点上的完整窗口宽度，但仅当窗口低于某个宽度时。

我使用媒体查询将所有宽度大于 1170 像素的字体大小定义为 148 像素，宽度小于 1170 的字体大小定义为 118 像素，然后在 940 像素处，我希望 FitText 接管并调整 h1 的大小，使其变得流畅，拉伸整个宽度调整大小时的浏览器窗口。我为此使用以下 jQuery：

var title = $("header h1");
$(window).resize(function(){
    if ( $(window).width() < 940) {
        $(title).fitText(0.47);
    }
});

如果浏览器开始时宽度超过 940 像素，然后缩小尺寸，这将起作用。但是，效果并没有停止，如果浏览器窗口再次变宽，文本会继续随之缩放。

这是一个小提琴（可能必须跨越多个显示器并重新加载才能在缩放之前查看起始大小）：http: //jsfiddle.net/segFE/1/

理想情况下，我希望在浏览器窗口再次达到 > 940px 后停止效果并恢复到我的 CSS 中定义的标准尺寸。

我尝试添加另一个 if 条件来停止该功能，但我编写它的方式似乎不起作用：

var title = $("header h1");
$(window).resize(function(){
    if ( $(window).width() < 940) {
        $(title).fitText(0.47);
    }
    if ( $(window).width() > 940) {
        stop();
    }
});

任何关于我如何使这项工作的想法将不胜感激！

4

1 回答 1

1

根据 FitText 文档：

在您的响应式设计中使用这个插件来实现填充父元素宽度的可扩展标题。

我认为您可以避免一起使用 jQuery 并使用媒体查询，只需将 h1 包装在 div 或其他东西中，并为 1170+ 和 >940 尺寸设置固定宽度。

于 2012-08-29T02:58:42.023 回答