基于容器宽度的文本动态调整

Question

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

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

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

。

下面是我为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技能显然是非常有限的，所以我希望您能帮助我完成所有的purdy操作。我认为使用$(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:当然，当窗口被调整大小时，它也会缩放你的文本。