Question

我正在尝试创建一个标题，其中包含一个方形SVG徽标和一个并排的名称，可以通过浏览器窗口很好地调整大小。

我的标题中有两个DIV，＃logo和#name。我在#name上使用了jQuery FitText，并为#logo编写了一个简单的脚本来从#name获取高度，并将其用于高度和宽度。相关位在这里：http://jsfiddle.net/dBcdz/

<header>
    <div id="name">MY NAME</div>
    <div id="logo"></div>
    <div style="clear:both"></div>
</header>

$(document).ready(function () {
    var setLogo = new function () {
        var $size = $('#name').height();
        $('#logo').css({
            'height': $size,
            'width': $size
        });
    }
});
$(window).resize(function () {
    setLogo();
});

问题是，我无法通过窗口调整这两个div。最好只调整名称大小，或者我必须重新加载页面以使其看起来正确。有人可以帮忙吗？

Answer 1

修复您的代码：

SEE DEMO

function setLogo() {
    var $size = $('#name').height();
    $('#logo').css({
        'height': $size,
            'width': $size
    });
}

$(document).ready(function () {
    $(window).resize(function () {
        $("#name").fitText();
        setLogo();
    }).resize();
});

Answer 2

你几乎就在那里，我正在缓存选择器，所以效率更高：

var $name = $("#name"),
    $logo = $('#logo');

function resize() { 
   var $size = $name.fitText().height();
   $logo.css({
     'height': $size,
     'width': $size
   });
}

$(document).ready(resize);
$(window).resize(resize);

http://jsfiddle.net/aXWZC/

如何并排响应SVG和文本？

2 个答案: