0

FitTextを使用して、ページのメインh1をレスポンシブサイトのウィンドウ幅全体にサイズ変更しようとしていますが、ウィンドウが特定の幅を下回っている場合に限ります。

メディアクエリを使用して、フォントサイズを1170pxより大きいすべての幅で148px、1170未満の幅で118pxと定義しました。次に、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で定義された標準サイズに戻したいと思います。

関数を停止するために別の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 に答える