Могут ли изменения ширины элемента изменить размер шрифта другого элемента с помощью jQuery?

Question

У меня есть контейнер, ширина которого изменяется (в зависимости от размера окна браузера), хотя его максимальная ширина составляет 950 пикселей. Контейнер имеет вложенный заголовочный элемент h1, в котором есть некоторый текст в виде строки.

Я хочу каким-то образом уменьшить размер этого заголовка по мере того, как контейнер сужается (используя jQuery).

Я думаю, что это будет работать примерно так:

• Получить текущую ширину контейнера
• Разделите текущую ширину контейнера на 950, чтобы получить номер модификатора (например, будет что-то вроде 0,78)
• Получить текущий размер шрифта CSS h1 (преобразовать из строки в num?)
• Умножьте это на номер модификатора
• Передать результат обратно в размер шрифта CSS h1

Я бы хотел, чтобы он работал динамически при изменении размера браузера, если это возможно.

Есть идеи?

Ура, Джеймс

Answer 1

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

• 'контейнер' - это идентификатор контейнера
• 'header1' - это идентификатор внутреннего элемента h1
• 24 - размер шрифта по умолчанию для элементов H1

Answer 2

Метод, который вы описали, должен работать просто отлично. Преобразование из строки в число должно выполняться с использованием parseFloat, поскольку размер шрифта возвращается в (IIRC) em , например ::

.

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

Да, это можно сделать во время изменения размера браузера, используя

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