Question

是否可以缩放textarea的FONT SIZE并在调整浏览器窗口大小时保持其比例？

我的要求：背景和前景上有一个图像我有一个文本区域，用户可以在其中添加文本。当调整大小窗口时，我需要保持textarea的位置和比率。

Answer 1

如果您使用jQuery，则以下代码将根据窗口大小调整textarea的大小和字体大小。

在执行代码之前，请确保设置textarea的大小和字体大小（即任何会改变其大小的内容都已加载并执行）。

从CSS读取字体大小（包括单位），并根据窗口高度的变化进行更新;宽度被忽略。我怀疑你打算改变字体长宽比。

可以进行优化（仅调整更改的尺寸;仅在窗口高度更改时更改字体），但我会留给您。

假设：

字体的初始大小在CSS

textarea你想要维持的比例有一个id＆＃39; mytextarea＆＃39;。

    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);
    };

编辑：

重新阅读此问题后，我不清楚您是否愿意：

缩放textarea的字体大小并保持 textarea 的比例，或
缩放textarea的字体大小并保持 font 的比例（即实际扭曲字体）

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

维持textarea调整比例

1 个答案: