Изменять размер шрифта пропорционально размеру экрана?

Question

Изменять размер шрифта пропорционально размеру экрана?

Как я могу масштабировать шрифты в зависимости от размера экрана?

(Таким образом, вместо того, чтобы просто выполнять несколько мультимедийных запросов для настройки, возможно, на 3 или 4 размера экрана, шрифт должен быть пропорционален размеру экрана, чтобы мы максимально использовали экран.

Мне нужно поддерживать все браузеры до ie6. Это нормально, если поддержка не "хороша" в браузерах с долей рынка <1 %, но она должна, по крайней мере, быть полезной.

Я рассмотрел:

виртуальная машина (% от области просмотра размер): не очень хорошо поддерживается.
FitText.js
Использование Ems (похоже, это, по крайней мере, несколько адаптируется. (Если я просмотрю его на своем телефоне и переключусь с альбомной ориентации на портретную, шрифт станет немного меньше. Я предполагаю, что, возможно, в этом случае телефон/браузер изменяет размер базового шрифта.
используя множество медиа-запросов (10 или 20) и, возможно, используя EM для всех размеров, поэтому нам нужно только установить базовый (основной) размер шрифта в медиа-запросе.

2

fonts responsive-webdesign

Author: Clay Nichols, 2014-12-09

Source

1 answers

score 2 · Accepted Answer

В моем CSS я использую проценты для изменения размера шрифта и удостоверяюсь, что размер шрифта установлен на inherit для всех типов элементов

h1 {
    font-size: 200%
}
h2 {
    font-size: 150%
}
table {
    font-size: inherit;
}

Затем JavaScript просто нужно настроить базовый размер шрифта документа или текста.

$("body").css("font-size",Math.max($(window).width()/50,8)+"px")

Это конкретное утверждение основано на jQuery, но оно должно быть выполнимо и без jQuery.

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