元素宽度的变化可以使用jQuery修改另一个元素的font-size吗？

Question

我有一个容器，其宽度是流动的（取决于浏览器窗口的大小），尽管它的最大宽度为950px。容器有一个嵌套的标题h1元素，它有一些文本作为标语。

我想以某种方式使这个标题文本变得更小，因为容器变得更窄（使用jQuery）。

我认为它会起作用：

• 获取当前容器宽度
• 将当前容器宽度除以950以获得修饰符号（例如，将为0.78）
• 获取当前CSS字体大小h1（从字符串转换为num？）
• 乘以修饰符号
• 将结果传回CSS字体大小h1

如果可能的话，我希望它在浏览器调整大小期间动态工作。

有什么想法吗？

干杯， 詹姆斯

Answer 1

您概述的方法应该可以正常工作。从字符串到数字的转换应使用parseFloat来处理，因为字体大小在（IIRC） em 中返回，例如：

var hText = $("#hText").css("font-size");
var textSize = parseFloat(hText);

是的，可以在浏览器调整大小期间使用

执行此操作

(window).bind('resize', function () {
    // Your implementation
});

Answer 2

$(window).resize(function(){
    var widthRatio =  $('#container').width()/950; 
    $('#header1').css('font-size', 24 * widthRatio);
    });

• 'container'是容器的ID
• 'header1'是内部h1元素的id
• 24是H1元素的默认字体大小