javascript - 保持文本区域调整大小的比例

Question

是否可以缩放文本区域的字体大小并在调整浏览器窗口大小时保持其比例？

我的要求:背景和前景上有一个图像，我有一个允许用户添加文本的文本区域。当调整 bowser 窗口大小时，我需要保持文本区域的位置和比例。

Answer 1

如果您使用 jQuery，那么下面的代码将根据窗口的大小调整文本区域的大小和字体的大小。

在执行代码之前，确保已设置文本区域的大小和字体大小(即已加载并执行任何会改变这些大小的内容)。

字体大小(包括单位)从CSS中读取，并根据窗口高度的变化进行更新；宽度被忽略。我怀疑您是否打算更改字体纵横比。

可以进行一些优化(仅调整已更改的尺寸；仅在窗口高度更改时更改字体)，但我会将这些留给您。

假设:

• 字体的初始大小在CSS中设置

• 要保持比例的文本区域有一个 id 'mytextarea'。

      function startResizeHandling(){
          var textarea = $('#mytextarea');
          var initialHeight = textarea.height(),
              widthRatio = textarea.width()/$(window).width(),
              heightRatio = initialHeight/$(window).height(),
              cssFontSize = textarea.css('font-size');
          var fontRatio = parseFloat(cssFontSize.match(/^([0-9.]+)/)[1]) / initialHeight,
              fontUnit = cssFontSize.match(/^[0-9.]+([a-z]+)$/i)[1];
  
          function handleWindowResize() {
              var newWidth = widthRatio * $(window).width(),
                  newHeight = heightRatio * $(window).height();
              textarea.width(newWidth);
              textarea.height(newHeight);
              textarea.css('font-size', fontRatio * newHeight + fontUnit);
          }
  
          $(window).on('resize', handleWindowResize);
      };
  

编辑:

重新阅读问题后，我不清楚你是否想:

• 缩放文本区域的字体大小并保持文本区域的比例，或者
• 缩放文本区域的字体大小并保持字体的比例(即实际扭曲字体)

这个答案解决了第一个问题，而不是第二个问题。