0

コンテナを埋めるためにフォントサイズを調整しようとしています。これだけでは明らかに問題ではありません。ただし、コンテナーも静的サイズではありません。サイズはブラウザー ウィンドウの % に設定されており、ブラウザーのサイズ変更時にコンテナーと共にフォント サイズを動的に更新したいと考えています。

私は、ブラウザーの高さと幅の % でフォント サイズを調整する、見つけた修正済みのスクリプトを使用していました。

$( document ).ready( function() {
    var $body = $('body'); //Cache this for performance

    var setBodyScale = function() {
        var scaleFactor = 0.0001,
            scaleSource = $(window).height(),
            scaleSource2 = $(window).width(),
            maxScale = 200,
            minScale = 10;

        var fontSize = (scaleSource * scaleSource2) * scaleFactor; //Multiply the width of the body by the scaling factor:

        if (fontSize > maxScale) fontSize = maxScale;
        if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums

        $('body').css('font-size', fontSize + '%');
    }

    $(window).resize(function(){
        setBodyScale();
    });

    //Fire it when the page first loads:
    setBodyScale();
});

これで目的の結果が得られなかったので、スケール ソ​​ースがウィンドウではなくコンテナになるように変更してみました。これは多少機能しましたが、動的に更新されず、ページの更新が必要でした。

要するに、フォントサイズを変更して、サイズがブラウザウィンドウの%によって決定されるコンテナをその場で埋める方法を見つけることができません。

4

2 に答える 2

1

なぜすでに存在するものを発明するのですか？すでに優れたjQueryツールがあります：http：//fittextjs.com/

于 2012-05-04T13:37:06.840 に答える
0

これはまだ現実世界の答えではありませんが、ビューポートに依存するフォント サイズは間近に迫っています。

http://css-tricks.com/viewport-sized-typography/

現在、Chrome Canary でのみサポートされていますが、今後サポートされる予定です。

于 2012-05-04T13:41:24.710 に答える