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 回答