Как сделать адаптивный шрифт css

Адаптивные размеры шрифтов на CSS

Вы уже знаете, что единицы rem считаются относительно размера шрифта корневого элемента, по умолчанию равного 16px :

Такую особенность используют, чтобы массово менять размеры шрифтов при изменении ширины экрана. Давайте посмотрим, как это делается.

Пусть нашим тегам заданы следующие размеры:

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

Как сделать — Отзывчивый текст

Узнать, как создать адаптивную типографику с помощью CSS.

Отзывчивый текст

Привет мир

Измените размер окна браузера, чтобы увидеть, как масштабируется размер шрифта.

Адаптивный размер шрифта

Размер текста может быть установлен с помощью единици vw , что означает, что "ширина видового экрана".

Таким образом, размер текста будет соответствовать размеру окна браузера:

Пример

Видовой экран — это размер окна браузера. 1vw = 1% от ширины видового экрана. Если видовой экран имеет ширину 50cm, то 1vw составляет 0,5cm.

Изменение размера шрифта с помощью медиа запросов

Вы также можете использовать медиа запросы для изменения размера шрифта элемента на определенных размерах экрана:

Изменяемый шрифт.

Пример

/* Если размер экрана 601px широкий или больше, установите размер шрифта <div> равным 80px */
@media screen and (min-width: 601px) <
div.example <
font-size: 80px;
>
>

/* Если размер экрана составляет 600 пикселей в ширину или меньше, установите размер шрифта <div> равным 30px */
@media screen and (max-width: 600px) <
div.example <
font-size: 30px;
>
>

Совет: Зайдите на наш учебник CSS Шрифт, чтобы узнать больше о шрифтах.

Чтобы узнать больше о медиа запросах, читайте наш учебник CSS Медиа запросы.

Как сделать адаптивный шрифт css

Наличие фиксированного размера по сравнению с устройствами не всегда является хорошей идеей. Ключевым моментом является получение читаемого размера шрифта и удобной длины строки в большинстве видовых экранов. Элементы просмотра CSS и медиа запросы предоставляют средства для реализации гибкого размера шрифта.

Размер шрифта и длина строки

Существует множество разных представлений, на которых находится лучший размер шрифта пикселя, или является минимальным читаемым размером. Конечно, верно то, что большие шрифты более доступны и удобны для чтения. Тенденция последних лет заключалась в увеличении размеров шрифтов. Большинство сайтов сегодня используют размер шрифта от 14 до 18 пикселей для основного текста. Эксперты по изобилии рекомендуют размер шрифта не менее 16 пикселей.

Размер шрифта намного больше, чем кажется. Обратите внимание, что количество слов на строку также является ключевым. Мы все испытали стресс при чтении узких столбцов текста двумя словами на строку. Длинные линии, как правило, трудно сосредоточиться, потому что мы используем начало и конец строк в качестве ссылок неосознанно. Однако исследование 2005 года показало, что мы стремимся читать быстрее текст с длинными строками длиной до 95 символов.

Единицы просмотра CSS

Единицы просмотра CSS: vw, vh, vmin и vmax были созданы специально для того, чтобы длина в CSS, включая размер шрифта, была относительно размера видового экрана. Они позволяют получить действительно отзывчивый размер шрифта с его размером в процентах от ширины или высоты видового экрана.

1. vw обозначает ширину окна просмотра. 1vw равно 1% ширины окна просмотра.
2. vh обозначает высоту видового экрана. 1vh равно 1% от высоты.
3. vmin относится к кратчайшему (ширина или высота), а vmax — самому длинному.

Пиксели, ems, rems и медиа-запросы

Второй способ реализовать отзывчивый размер шрифта — использовать медиа-запросы вместе с текстом фиксированного размера, используя значения ems, rems и px:

1. px определяет высоту букв в пикселях CSS
2. em относительно размера шрифта родителя, например. 2em = 28px, если размер шрифта родительского элемента равен 14px.
3. rem (root em) относительно размера шрифта элемента html. 1 rem измеряет то же самое во всем документе. ems трудно поддерживать в правилах, вложенных слишком глубоко, но у rems нет проблем.

Что делать дальше?

Размеры шрифтов и задаете их не в пикселях, а в em. Расчет такой: 1em = 16px и 1em = 100%

Расчет такой: 1em = 16px и 1em = 100%.

Например: берем заголловок, где нужн задать размер шрифта 30 пикселей. Здесь поможет колькулятор, что делим 30 на 16. Получается 1,875.

Остается поставить в CSS:

Если нужно задать размер текста 9 пикселей:

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

Как на самом деле сделать размер шрифта отзывчивым, и здесь появляются медиа-запросы. Если вы используете ems, просто измените размер шрифта html по мере необходимости и тщательно настройте детали.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *