如何使用 JavaScript 根据浏览器宽度动态缩放文本大小？

基于浏览器宽度的动态文本大小缩放

问题：

在上下文中在项目中，文本大小保持静态，需要动态调整到浏览器窗口宽度的 90% 左右，并相应缩放垂直文本大小。

答案：

使用 JavaScript 缩放正文字体大小：

实现一个 JavaScript 函数，根据浏览器窗口的宽度设置正文字体大小。

<code class="javascript">$(document).ready(function() {
  var $body = $('body');

  var setBodyScale = function() {
    var scaleSource = $body.width(),
      scaleFactor = 0.35,
      maxScale = 600,
      minScale = 30;

    var fontSize = scaleSource * scaleFactor;

    if (fontSize > maxScale) fontSize = maxScale;
    if (fontSize < minScale) fontSize = minScale;

    $body.css('font-size', fontSize + '%');
  }

  $(window).resize(function() {
    setBodyScale();
  });

  // Fire it when the page first loads:
  setBodyScale();
});</code>

说明：

此脚本根据浏览器窗口的宽度调整整个 body 元素的字体大小。可以根据需要自定义缩放系数以及最小和最大字体大小值。

结果：

此方法可确保以 em 单位设置的文本元素动态缩放大约为浏览器宽度的 90%，并相应地调整其垂直尺寸。

以上是如何使用 JavaScript 根据浏览器宽度动态缩放文本大小？的详细内容。更多信息请关注PHP中文网其他相关文章！