2:00
Автор: Рубрика: CSS-рецепты Один комментарий

Как делать в css адаптивный текст (размер шрифта)?

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

Я поделюсь с вами одной фишкой, как верстать сайты более правильно. Наверняка все вы задаете размер шрифта в пикселях, верно? Это достаточно простой и удобный подход, но у него есть 1 проблема — при смене масштаба или размера шрифта в настройках браузера иногда могут возникать определенные проблемы.

Чтобы их вообще не было, нужно задавать все размеры с помощью относительной единицы em. Чтобы корректно это делать, для начала необходимо сбросить все css-настройки, которые браузер сам ставит по умолчанию.

О том, как это делать, вы можете прочитать в этой статье, там же находится нужный код. В частности, если вы просмотрите тот код, то одна из строк в нем такая:
font-size: 100%;

Такой размер шрифта задается для всех элементов. Что значит 100%? Запомните, что в пикселях это равно шестнадцати (16px). Итак, 100% = 16рх.

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

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

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

selector{
font-size: 1,875em;
}

Или какой-то подсказке в форме, например, нужно задать размер текста 9 пикселей:
9/16 = 0,5625 em.

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

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

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

Еще материалы по CSS

Бесплатный курс по CSS

Премиум уроки по CSS

Полный практический курс по HTML5&CSS3

Один комментарий
  • Юрий Ваценко

    Сколько статей по CSS)))

    2016-07-13 в 12:13 | Ответить