jQuery的流体全宽度的文本与响应网

我试图用FitText来调整的主要H1我的网页上以全窗口宽度在我的回应式网站的一部分，但只有当窗口是有一定宽度以下。jQuery的流体全宽度的文本与响应网

我已经使用媒体查询来定义字体大小为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/

理想情况下，我想效果停止浏览器窗口再次达到> 940px后恢复回到我的CSS中定义的标准大小。

我都试过，如果条件添加另一停止功能，但我写的方式似乎并不奏效：

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

我如何能得到这个工作，任何想法，将不胜感激！

来源

2012-08-29 R.J.

你为什么不只是设置了'maxFontSize'财产？ – Blender

这是行不通的，因为我在1170有一个断点，字号小于最大宽度。如果我将maxFontSize属性设置为较大的大小，它仍会在1170断点之下出现相同的问题。不过谢谢你的建议。 –

按照FitText DOC：

使用这个插件在你的自适应设计，实现可扩展的头条新闻，填补父元素的宽度。

我认为你能避免使用jQuery一起，用媒体查询，只是包装在一个div或东西H1，并设置一个固定的宽度上是为1170+和> 940米的尺寸。

来源

2012-08-29 02:58:42 Brian

这确实奏效，谢谢。我希望能够避免额外的标记，但是这样做的效果非常好，以至于它不是一个太大的问题。谢谢！ –

jQuery的流体全宽度的文本与响应网

回答

相关问题