jquery - 如何制作可调整字体大小的响应式文本框/文本区域？

Question

我想制作一个响应式文本框/文本区域，如果我想重新调整文本框/文本区域的大小，内部字体也会重新调整大小。

等待建议。

提前致谢。

Answer 1

根据 fiddle您已经分享了以下内容应该有效。基本上我们只是将整个文本区域包含在 div-

• HTML

  <div id="resizable">
      <textarea rows="4" cols="40">This is a textarea. Test for resizing</textarea>
  </div>
  

• CSS

  textarea {
      width:100%;
      height:100%;
  }
  
  #resizable {
      height: 100px;
      width: 100px;
      font-size: 10px;
      background: #ccc;
  }
  

• JS

  $('#resizable').resizable({
      maxHeight: parseInt(200),
      maxWidth: parseInt(180),
      resize: function(evt, ui) {        
          var width1 = parseInt(ui.element.css('width')),
              height1 = parseInt(ui.element.css('height'));
          ui.element.css({
              'font-size': (width1/10)+'px',
              'line-height': (height1/10)+'px'
          });
      }
  });