Css шрифт в зависимости от размера экрана

Css шрифт в зависимости от размера экрана

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

Обзор единиц измерения

Единицы измерения можно разделить на две категории: абсолютные и относительные.

Абсолютные единицы являются фиксированными и относятся к каким-либо физическим единицам измерения. После того, как они были заданы, размер не меняется.

Относительные единицы не имеют фактического значения. Их размер определяется относительно родительского элемента. Это означает, что размер шрифта можно изменить в HTML путем изменения размеров связанного элемента.

Вот краткий обзор некоторых единиц измерения:


Я подробнее рассмотрю те единицы измерения, которые являются наиболее значимыми — px , pt , % , em , rem и vw .

Какая между ними разница?

Разницу между этими единицами измерения трудно понять теоретически, так что лучше продемонстрировать ее на конкретных примерах увеличения размера шрифта HTML .

Пример 1 — Настройки по умолчанию

В HTML-документе , где вы еще не устанавливали никаких размеров шрифтов, существуют настройки по умолчанию. В большинстве браузеров размер шрифта по умолчанию для разделов html и body — 100%. Что соответствует следующему:

100% = 1em = 1rem = 16px = 12pt

Это означает, что, если вы установите размер шрифта для одного блока в 100%, а для другого — 16px , на экране они будут выводиться с одним и тем же размером шрифта:

Пример 2 — Абсолютные и относительные единицы измерения

Разницу между абсолютными и относительными единицами измерения проще понять на примере, когда мы хотим размер шрифта в HTML задать для конкретного элемента. Если мы зададим html < font-size: 200% >, это повлияет только на блоки с размером шрифта, заданным в относительных единицах:


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

Читайте также:  Bash передача параметров в функцию

Пример 3 — rem и em (и %)

Единицы измерения em ( и % ) работают путем вычисления текущего размера шрифта в зависимости от размера шрифта родительского элемента.

Поскольку р является дочерним элементом body , который в свою очередь является дочерним html — параграфы, font-size которых задан с помощью em и процентов, будут иметь два разных размера шрифта HTML :


При использовании Em вы должны принимать во внимание размер шрифта всех родительских элементов. В противном случае это может привести к полной неразберихе.

Решением данной проблемы является rem . Он рассчитывается только на основе размера шрифта элемента html , а не родительского элемента.

Использование rem позволяет сохранить масштабируемость em без влияния иерархии элементов.

Пример 4 — Размеры шрифта на основе ширины окна просмотра

vw — это новая единица измерения CSS3 , которая использует для изменения размера шрифта в HTML ширину окна просмотра. Это позволяет задавать размеры шрифтов в плавающих адаптивных макетах.

Это отличная единица измерения для адаптивного дизайна, но я не являюсь ее поклонником. Она не дает мне достаточного контроля над размером шрифта, который всегда оказывается слишком большим или слишком маленьким.

Мой метод

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

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

Поэтому мое решение заключается в использовании в html коде размера шрифта rem ( и пикселей в качестве запасного варианта ):

Читайте также:  An8009 цифровой мультиметр обзор

Это позволяет мне изменять размеры шрифтов с помощью следующего кода:

Этот метод использует пиксели в качестве запасного варианта, поскольку rem не поддерживается в IE8 и ниже. Из-за этого, когда я изменяю размер шрифта HTML для обеспечения масштабируемости, это не затрагивает резервный вариант. Но это не проблема, потому что возможность масштабирования для сверх больших экранов, является необязательной.

Данная публикация представляет собой перевод статьи « CSS Font Sizing » , подготовленной дружной командой проекта Интернет-технологии.ру

Как масштабировать размер шрифта в зависимости от размера экрана? Не путать с процентным соотношением дефолтного размера шрифта в body. Нужна именно зависимость от размеров экрана устройства.

Есть новые единицы измерения vw и vh.

1vw = 1% от ширины окна. При уменьшении ширины окна, уменьшается ширина и высота шрифта элемента.

1vh = 1% от высоты окна. При уменьшении высоты окна, уменьшается ширина и высота шрифта элемента.

Они уже поддерживаются современными браузерами. В том числе и на мобильных устройствах.

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

Для отправки комментария вам необходимо авторизоваться.

Скажите, можно ли сделать шрифт на сайте резиновым — размер которого будет изменяться в зависимости от изменения размеров браузера?

1 ответ 1

Да, можно. Даже без вмешательства javascript. Вот так:

Обязательно прочитайте вот эту статью:

Browser Support
IE 9+, Firefox 19+, Chrome 20+, Safari 6+, Opera 23+

Всё ещё ищете ответ? Посмотрите другие вопросы с метками шрифты css или задайте свой вопрос.

Связанные

Похожие

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.1.10.35756

Ссылка на основную публикацию
Adblock detector