可以更改元素'；s宽度修改另一个元素'；使用jQuery时的字体大小？

我有一个宽度为流体的容器（取决于浏览器窗口的大小），尽管它的最大宽度为950px。容器有一个嵌套的header h1元素，该元素有一些文本作为strapline

我想让这个标题文本随着容器的变窄而变小（使用jQuery）

我想它会像这样工作：

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

如果可能的话，我希望它能在浏览器调整大小的过程中动态工作

有什么想法吗

干杯，

---

James

你概述的方法应该很好用。应使用

parseFloat

处理从字符串到数字的转换，因为字体大小在（IIRC）em中返回，例如：

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

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

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

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

---

您似乎已经基本解决了这个问题，您可以使用jQuery完成所有这些工作。你有什么问题？谢谢你的回答。我在两者之间做了一种混搭，效果很好！

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