是否可以根据浏览器宽度动态缩放文本大小？

小编典典

是否可以根据浏览器宽度动态缩放文本大小？

html

这是用于以下项目的项目 ://phlak.github.com/jColorClock/。如您所见，现在文本大小仅设置为静态大小。我希望文本始终是窗口宽度的90％，但也要相应地缩放垂直大小。有相对简单的方法吗？

阅读 279

2020-05-10

共1个答案

小编典典

真是的！

<body>使用一些JavaScript调整窗口大小时，设置字体大小。（为了方便起见，我在这里使用了jQuery：

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

            var setBodyScale = function() {
                var scaleSource = $body.width(),
                    scaleFactor = 0.35,                     
                    maxScale = 600,
                    minScale = 30; //Tweak these values to taste

                var fontSize = scaleSource * 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();
        });

因为您的字体大小是在em（完美）中设置的，所以调整body元素的字体大小百分比可以用作通用的“文本缩放”。这将缩放在em中设置的任何文本-
如果您想更具体一些，可以在<div>仅包围要缩放的元素的上设置字体大小的百分比。

2020-05-10