Изменение размера шрифта при изменении размера окна

Привет, ребята Я работаю над небольшим скриптом, который должен брать размер шрифта любого контейнера с классом «.text» и изменять его размер в соответствии с основными изменениями размера контейнера (при изменении размера). Это то, что мне удалось придумать. Но, к сожалению, это требует полностью модифицированного текста и изменяет его бесконечность при изменении размера.Изменение размера шрифта при изменении размера окна

Так что в общем случае мне нужно, чтобы этот скрипт принимал все разные шрифты, а при изменении размера окна изменял их только из исходных размеров, которые я определил в css.

Я был бы очень благодарен за любые советы!

$(".text").each(function() { 
    // getting how many times original size of container changed 
    var starter_height = $('#wrapper').height(); 
    var height_change = starter_height/602; 

    totalHeight = parseInt($(this).css('font-size')); 
    $(this).css({"font-size": totalHeight * height_change + "px"}); 
    console.log(totalHeight); 
});

источник

2016-03-20 Deividas

Почему вы хотите это сделать? Если вы хотите, чтобы ваш размер шрифта регулировался в соответствии с размерами экрана, используйте размер шрифта в%. Например: размер шрифта: 100% - 14 пикселей на обычном экране ноутбука. Вы можете сделать 110%, 90% или что хотите. Также вы можете захотеть просмотреть CSS-запросы СМИ –

Почему бы не использовать 'em' или что-то подобное и изменить размер шрифта' body' со средствами массовой информации? – Roope

Или используйте 'rem' (поскольку это' em', но затем * всегда * на основе шрифта корневого документа) и используйте предложение @ Roope –

Thx guys. Мне удалось объединить свою идею и вашу, используя em с размером шрифта. Теперь мне не нужно писать много разных медиа-запросов, по крайней мере, для шрифта. Я также думаю добавить дополнительные «если», чтобы обновлять шрифт не все время при изменении размера, но с некоторым отрывом.

источник

2016-03-21 09:42:26 Deividas

Если font-size должен быть пропорционален размеру экрана, то вы можете использовать vw and vh

.text-1 { 
 
    font-size: 6vh; 
 
}

<div class="text-1">First Text</div>

источник

2016-03-21 12:15:49 xpy

Изменение размера шрифта при изменении размера окна

ответ

Смежные вопросы