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

Question

我正在开发响应式设计，并且有一些显示

标签，我希望在浏览器窗口宽度减小时缩小这些标签。

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

1. 主体字体大小设置为 14px
2. h3 标签的字体大小为 40px
3. 包含的 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 的原因。

Answer 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 事件中都选择它，因为当您实际调整浏览器大小时，会有大量这些引发事件的事件。

Answer 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

Answer 3

对于通过谷歌搜索“响应式字体大小”等内容找到此内容的人，这可能会有所帮助：

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

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

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