Question

所以在这里我试图做一些与窗口成比例的文本大小调整。它工作正常，或者至少我认为它确实如此。如果您调整浏览器大小然后刷新页面，那么您将看到它的工作原理。然而，随着window.onresize处理程序的添加，问题开始出现。我确实获得了调整大小的更新值，但是它将数字增加到极限高度。我的计算有什么问题，或者我应该将一些变量保留在函数之外？我觉得问题是我的getFontSize变量。我的数学可能也很可怕。

我会很感激一些反馈，并想知道我做错了什么。

http://jsfiddle.net/uu1faumL/

window.onresize = flexClass;
var initFlexClass = window.onresize;
initFlexClass();
function flexClass() {
    var wScan = {width: window.innerWidth || document.body.clientWidth};
    var source = document.getElementById('wrapper');
    var getFontSize = window.getComputedStyle(source, null).getPropertyValue('font-size');
    var fontSize = parseFloat(getFontSize);
    var result = Math.ceil((fontSize / 100) * wScan.width);
    source.style.fontSize = result + 'px';
}

Answer 1

看起来你的问题是数学和维持调整之间状态的组合。

您应该缓存原始大小，并根据每个调整大小的原始大小计算新大小：

//Use an IIFE to keep your variables out of global scope.
(function () {
    //Some arbitrary scale factor. Come up with your own, or find a way to calculate it.
    var scaleFactor = 100;

    //Initialize the stuff that doesn't need to be retrieved on every resize event.
    var source = document.getElementById('wrapper'),
        getFontSize = window.getComputedStyle(source, null).getPropertyValue('font-size'),
        fontSize = parseFloat(getFontSize);

    //Here's your resize callback
    var onResize = function () {
        var wScan = { width: window.innerWidth || document.body.clientWidth };

        //Your math was scaling off both the font size and the width of the document.
        //You should scale the original font-size based on the width of the document every-time.
        var result = Math.ceil(fontSize * wScan.width / scaleFactor);

        source.style.fontSize = result + 'px';
    };

    if (window.addEventListener)
        window.addEventListener('resize', onResize); //Add your event listener.
    else
        window.attachEvent('onresize', onResize); //IE support.

    onResize(); //Call resize manually the first time.
})();

JSFiddle

您的原始数学意味着每次调整大小时字体大小始终会继续增长，因为您一直在提取您设置的最后一个字体大小。这就是为什么你的数字很快变得非常大。

在窗口上更新字体大小调整大小与窗口成比例。新的价值观是错误的

1 个答案: