元素寬度的變化是否可以使用jQuery修改另一個元素的字體大小？

Question

我有一個容器，其寬度是流暢的（取決於瀏覽器窗口的大小），儘管它的最大寬度爲950px。該容器有一個嵌套的標題h1元素，其中有一些文字作爲背景線。

我想以某種方式使該標題文本變得更小，因爲容器變得更窄（使用jQuery）。

我認爲它會工作是這樣的：

• 獲取當前容器寬度
• 除以當前容器由950寬度得到修正數字（例如將一些諸如0.78）
• 獲取目前H1的CSS字體大小（從字符串轉換爲NUM？）
• 乘這個修飾語數量
• 結果傳遞迴H1
的CSS字體大小

如果可能，我希望它在瀏覽器調整大小時動態工作。

任何想法？

乾杯， 詹姆斯

Answer 1

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

• '容器' 在容器的id
• '頭1' 是內h1元素
• 24的id是H1元素

Answer 2

您已經提出的方法應該只是罰款。從字符串到數字的轉換應使用parseFloat來處理，因爲字體大小是（IIRC）EM，如返回：

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

是的，這是可能的瀏覽器調整大小時要做到這一點，利用

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