Question

我正在尝试调整字体大小以填充容器。仅这一点显然不是问题。但是，容器也不是静态大小，它的大小设置为浏览器窗口的％，我希望字体大小在浏览器大小调整时动态更新，以及容器。

我一直在使用我发现的修改后的脚本，它会根据浏览器的高度和宽度调整字体大小。

$( 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();
});

我没有从中得到所需的结果，所以然后尝试更改它，以便缩放源是容器而不是窗口。这有点工作，但它没有动态更新，它需要刷新页面。

简而言之，我无法找到一种方法来调整字体大小，以便在运行时填充大小由浏览器窗口百分比决定的容器。

Answer 1

为什么要发明已存在的东西？那里已经有一个很棒的jQuery工具：http://fittextjs.com/

Answer 2

这不是一个现实世界的答案，但是依赖于视口的字体大小正在出现：

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

目前它只支持Chrome Canary，但很高兴知道它即将推出。

填充动态div的字体大小

2 个答案: