javascript – 基于容器宽度动态调整文本大小

我正在开发一个响应式设计,我有一些显示< h3>当浏览器窗口的宽度减小时我想缩小的标签.

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

> body font-size设置为14px
> h3标签的字体大小为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的原因.

解决方法:

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元素,因此不必每次调整大小事件都选择它,因为当您实际调整浏览器大小时,会触发大量的这些事件.

标签：javascript,jquery,responsive-design,font-size
来源： https://codeday.me/bug/20191006/1858822.html