Можете ли вы сделать атрибут размера шрифта масштабируемым в зависимости от окна браузера?

Question

Вот тот, с которым я никогда не сталкивался. Можно ли сделать масштаб шрифта с размером окна браузера. Например: сделать размер шрифта 100% доступной ширины. Я открыт для решений Javascript, jQuery или CSS.

Answer 1

Что вы подразумеваете под "размером шрифта 100% доступной ширины"?Что ваш размер шрифта в пикселях будет равен ширине страницы в пикселях или если какой-то текст заполнит ширину страницы?

Первый случай: размер шрифта равен ширине страницы

Если вы можете использовать JavaScript, вы можете прослушивать событие изменения размера окна, а затем изменять размер шрифта при каждом изменении размера окна.Вы можете сделать это либо в обычном JavaScript, либо в JQuery, с чем бы вы ни были знакомы.

Второй случай: ширина текста равна ширине страницы

Этот вариант довольно легко реализовать.Так как разные браузеры имеют разные параметры макета, на них также влияют настройки специальных возможностей для каждого пользователя.Что вы можете попытаться сделать, это настроить размер шрифта внутри <div/>, измерить ширину <div/> и перенастроить размер шрифта, пока не получите желаемую ширину.

Конечно, по крайней мереу вас есть несколько дней на оптимизацию, это даст ужасный визуальный эффект.Чтобы уменьшить его, вы можете отрегулировать текст на фоне (невидимый текст), найти нужный размер / ширину шрифта, а затем применить его к видимому блоку.

Answer 2

Я не понимаю, почему ты не мог. Просто создайте обработчик JS для события изменения размера окна и измените свойство style.fontSize целевого элемента в функции обработчика. Итак, что-то вроде:

window.onresize = function(event) {
    document.getElementById('targ').style.fontSize='10';
}