根据容器宽度动态调整文本大小 [英] Dynamically Resize Text Based on Container Width

问题描述

我正在研究响应式设计，我有一些显示

标签，当浏览器窗口的宽度减小时，我想缩小这些标签.

I'm working on a responsive design and I have some display <h3> tags that I would like to scale down when the width of the browser window is reduced.

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

The initial setup, based on a width of 960px:

1. 正文字体大小设置为 14 像素
2. h3 标签的字体大小为 40px
3. 包含 div 的宽度为 230px

所以这是我为 javascript/jQuery 制定的:

So here's what I worked out for the 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 函数是错误的使用事件，因为文本应该在页面加载时自动调整大小，而不仅仅是在窗口调整大小时.

My javscript skills are obviously quite limited, so I was hoping you could help me get this all purdy and working right. I think the $(window).resize function is the wrong event to use, since the text should resize automatically on page load, not just on window resize.

预先感谢您的帮助！

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

Note: I don't want the text to stretch to the edges of the containers, which is why I'm not using FitText.js or BigText.js.

推荐答案

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

window.resize is the correct event but it doesn't fire on page-load. You can however just add .trigger('resize') to your code to make it fire on page-load:

$(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 事件处理程序)，这将确保在您运行此代码时元素可用:

You are going to want to run this code after document.ready to make sure the width you are getting for the container is correct. You could also place this code at the bottom of your HTML document (which you should do with or without the document.ready event handler) which will make sure the elements are available when you run this code:

//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 事件中都选择它，因为当您实际调整大小时浏览器会触发大量此类事件.

Notice that I cached the H3 element(s) so it/then don't have to be selected every resize event, because when you actually re-size your browser there are tons of these events that fire.

这篇关于根据容器宽度动态调整文本大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！