首页 文章

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

提问于
浏览 次
1

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

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

  • 正文字体大小设置为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的原因 .

javascript jquery font-size responsive-design

3 回答

  • 0

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

    回复于
  • 4

    你可以试试这个 .

    $(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
    回复于
  • 1

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

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

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

    PS：当然，它还可以在调整窗口大小时缩放文本 .

    回复于

相关问题