根据容器宽度动态调整文本大小

Posted 2023-03-06

【中文标题】根据容器宽度动态调整文本大小

【英文标题】：Dynamically Resize Text Based on Container Width

【发布时间】：2012-03-02 08:23:41

【问题描述】：

我正在做一个响应式设计，我有一些显示 <h3> 标记，当浏览器窗口的宽度减小时，我想缩小这些标记。

初始设置，基于 960px 的宽度：

正文字体大小设置为 14px h3标签的font-size为40px 包含div的宽度为230px

这就是我为 javascript/jQuery 制定的：

$(window).resize(function()
    var containerSize = $('.container').width();
    var textPercentage = 0.17391304347826086956521739130435; /* 40/230 */
    var textRatio = containerSize * textPercentage;
    var textEms = textRatio / 14;

    $('.container h3').css(fontSize,textEms+"em");
);

我的 javscript 技能显然非常有限，所以我希望你能帮助我把这一切都搞定并正常工作。我认为$(window).resize 函数是错误的事件，因为文本应该在页面加载时自动调整大小，而不仅仅是在窗口调整大小时。

提前感谢您的帮助！

注意：我不希望文本延伸到容器的边缘，这就是我不使用 FitText.js 或 BigText.js 的原因。

【问题讨论】：

你应该可以使用css媒体查询，不需要使用js

@Jasper 和 ShankarSangoli 都给出了答案，但我要补充一点，您可能需要考虑限制调整大小事件处理程序的执行频率。参考benalman.com/projects/jquery-throttle-debounce-plugin或documentcloud.github.com/underscore/#throttle

@elclanrs 媒体查询只允许我根据特定的窗口宽度调整文本大小。我希望我的文本自动根据容器的宽度调整大小。

@jessegavin 你能解释一下那个插件到底是做什么的吗？我认为这与阻止脚本连续运行有关，但我不明白技术术语。谢谢！

@pixelcook 这篇文章比我解释它做得更好。

【参考方案1】：

window.resize 是正确的事件，但它不会在页面加载时触发。但是，您可以将 .trigger('resize') 添加到您的代码中，使其在页面加载时触发：

$(window).bind('resize', function()
    var containerSize  = $('.container').width(),
        textPercentage = 0.17391304347826086956521739130435, /* 40/230 */
        textRatio      = containerSize * textPercentage,
        textEms        = textRatio / 14;

    $('.container h3').css(fontSize, textEms+"em");
).trigger('resize');

您将希望在document.ready 之后运行此代码，以确保您为容​​器获取的宽度是正确的。您还可以将此代码放在 html 文档的底部（无论是否使用 document.ready 事件处理程序都应该这样做），这将确保在您运行此代码时元素可用：

//wait for `document.ready` to fire
$(function () 

    //cache the .container and H3 elements
    var $container = $('.container'),
        $h3        = $container.find('h3');

    //bind event handler to `window.resize`
    $(window).bind('resize', function()

        //get the width of the container
        var containerSize  = $container.width(),
            textPercentage = 0.17391304347826086956521739130435, /* 40/230 */
            textRatio      = containerSize * textPercentage,
            textEms        = textRatio / 14;

        $h3.css('fontSize', textEms+"em");
    ).trigger('resize');
);

请注意，我缓存了 H3 元素，因此不必在每个 resize 事件中都选择它，因为当您实际调整浏览器大小时，会触发大量此类事件。

【讨论】：

嗨贾斯珀，非常感谢您的回复！我有一个关于“等待document.ready 开火”的问题。我不太明白那是什么意思，你能解释一下或链接到一篇解释的文章吗？谢谢！

我认为 jQuery 的人可以更好地解释它：api.jquery.com/ready。 The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code.。基本上，当您将代码放在 document.ready 事件处理程序中时，您将确保您想要操作的元素可以用来执行此操作（例如，如果您将 JS 代码放在带有 document.ready 的文档的头部事件处理程序，您将无法在 body 标记中选择元素。

据我了解，将指向脚本的链接放在页面底部是不必要的，因为 DOM 在脚本之前加载。对吗？

差不多，我就是这么做的。如果您的代码不在document.ready 事件处理程序中，您的代码将能够更快地执行。您可以通过查看开发人员工具的网络选项卡来查看此事件何时触发；您还可以看到window.load 何时触发。不使用 document.ready 事件处理程序时，有时可以节省几秒钟。

甜蜜。 Jasper，这太棒了 - 谢谢你的出色回答，我的响应式设计谢谢你。

【参考方案2】：

你可以试试这个。

$(window).resize(function()
    var containerSize = $('.container').width();
    var textPercentage = 0.17391304347826086956521739130435; /* 40/230 */
    var textRatio = containerSize * textPercentage;
    var textEms = textRatio / 14;

    //fontSize should be enclosed in quotes
    $('.container h3').css('fontSize', textEms+"em");
)
.resize();//Triggers the resize on page load to set the font size

【参考方案3】：

对于通过谷歌搜索“响应式字体大小”之类的内容的人来说，这可能会有所帮助：

https://github.com/davatron5000/FitText.js

这是一个 jQuery 插件，可以根据容器的宽度设置字体大小。它还提供了一些选项来获得所需的结果。

PS：当然，当窗口调整大小时，它也会缩放您的文本。