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的流體全寬度的文本與響應網

回答

相關問題