Question

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

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

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

如果浏览器的启动范围大于940px，则会有效，然后调整大小。但是，效果不会停止，如果再次扩大浏览器窗口，文本将继续随之缩放。

这是一个小提琴（可能必须延伸到多个监视器并重新加载以在缩放之前查看起始大小）：http://jsfiddle.net/segFE/1/

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

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

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

关于如何让这项工作得以实现的任何想法都将非常感谢！

Answer 1

根据FitText doc：

在响应式设计上使用此插件，以获得填充父元素的宽度的可缩放标题。

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

jQuery流体全角文本与响应网格的一部分

1 个答案: