javascript - 更新窗口上的字体大小，调整大小与窗口成比例。新的值(value)观是错误的

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

你原来的数学意味着每次调整大小时字体大小总是继续增长，因为你不断获取你设置的最后一个字体大小。这就是为什么您的人数很快变得非常大。