Узнайте, как создать адаптивный текст с помощью CSS.
Resize the browser window to see how the font size scales.
Отзывчивый размер шрифта
Размер текста может быть установлен с помощью vw единицы, что означает "ширина видового экрана".
Таким образом размер текста будет следовать размеру окна браузера:
Пример
Resize the browser window to see how the font size scales.
Видовой экран — это размер окна обозревателя. 1ВВ = 1% ширины видового экрана. Если видовой экран шириной 50 см, 1ВВ составляет 0.5 cm.
Изменение размера шрифта с помощью запросов мультимедиа
Можно также использовать запросы мультимедиа для изменения размера шрифта элемента на определенных размерах экрана:
Пример
to 80px */
@media screen and (min-width: 601px) <
div.example <
font-size: 80px;
>
>
/* If the screen size is 600px wide or less, set the font-size of
Совет: Перейдите на наш CSS шрифт учебник, чтобы узнать больше о шрифтах.
Подробнее о мультимедийных запросах читайте в нашем учебнике по CSS Media запросам.
Сейчас у меня установлено для html font-size: 16px , h1 — 22px . Как правильно прописывать их под разные размеры экрана?
Брать и вручную подгонять, нормально читается или нет? Может есть какие-то правила, например, что для размера "768 — 992px" будет нормально читаться и выглядеть шрифт 13px . Если я установлю ед. из. шрифтов в rem , то для моб. устройств от какого размера шрифта будут просчитываться значение в rem ?
2 ответа 2
Берем гибкую основу:
Чтобы изменить шрифт для более маленьких экранов с помощью медиазапросов, достаточно просто изменить размер шрифта body , а так как текст страницы масштабируется пропорционально ему:
REM — относительный размер шрифта рассчитывается от корня страницы (Root EM), а именно — от тега HTML, а не от родителя. Меняя размер шрифта у HTML — все дочерние блоки так же меняют свой размер шрифта.
Есть еще вариант с размерами относительно вьюпорта — vw , vh .
Вариант применения svg текста.
В сети достаточно информации по данному вопросу, стоит только поискать!
Для адаптивных сайтов необходимо использовать meta-тег:
Дальше задавать нужные размеры в соответствующих интервалах медиа условий.
Но нужно понимать, что, вероятно, придется переделать не только размер шрифта.