—»     —»   Адаптивные размеры шрифтов при помощи REM
  Раздел: CSS/Style Sheets   Комментариев: 1  

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



С самого зарождения интернета люди начали дискутировать на тему того, как лучше всего определять шрифты. Кроме традиционных кандидатов – вроде px, em и %, – есть еще единица измерения rem, которая представляет собой довольно новую альтернативу, совмещающую в себе лучшие свойства своих предшественников.

Адаптивные размеры шрифтов при помощи REM
источник изображения: dribbble

Прошлые стандарты: размер шрифта при помощи em или %

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

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

Проблема заключалась в том, что при указании размеров в em или %, они должны были быть относительными чему-либо. Процентный показатель относителен по своей сути, и зачастую он был относителен размерам своего родительского элемента. Единица изменения em не сильно отличалась:

* в параметре модели блока margin-bottom em относится к размеру шрифта самого элемента. Изменения в размере шрифта вели к изменениям в поле (margin), что могло привести к абсолютно нежелательному эффекту.

* с другой стороны, определение размера шрифта при помощи em всегда было относительно размеру шрифта его родительского элемента. Применение размера 0.875em вело к всё большему уменьшению с каждым вложенным элементом. Чем больше вложенных элементов у вас было, тем меньше становился шрифт.

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

Временная эмансипация PX

В феврале 2009 года немецкий разработчик Jens Grochtdreis опубликовал статью под названием «Die leidige Sache mit der Schriftskalierung», которую можно было назвать «Раздражающие факты о масштабировании шрифтов», если бы ее публиковали на русском языке. Grochtdreis рекомендовал читателям использовать Px. На тот момент современные браузеры уже умели масштабировать страницы, а необходимости брать в учет IE6 уже не было.

Годом позже, немецкий разработчик Gerrit van Aaken поддержал Grochtdreis в своей статье «Warum ich Pixel fur CSS-Schriftgrade verwende» или «Почему мы используем PX для указания размеров шрифта в CSS». Не менее интересным, чем сама статья, было начавшееся обсуждение в комментариях. И в этом обсуждении, в комментарии под номером 22, человек упомянул о единице изменения REM, о которой тогда практически никто не знал.

«Root EM» или rem: рождение новой звезды

Спустя некоторое время, в 2011 году термин rem начал набирать обороты, медленно, но уверенно. И это не удивительно, так как rem совмещает в себе плюс и px и em. Он не менее гибок, чем его предшественники, но имеет и исправления недостатков с точки зрения наследования, так как rem всегда относится к корневому элементу – к 'html', а не к 'body'.

Чтобы получить значение rem, мы делим предпочитаемый размер в пикселях на базовое значение равное 16. Вот так будет выглядеть корректное указание размера шрифта в CSS:

html { font-size: 100%; } /* Браузерное умолчание, т.е. 16px  */   
h1 { font-size: 1.75rem; } /* 28/16 = 1.75 */
h2 { font-size: 1.375rem; } /* 22/16 = 1.375 */
p { font-size: 0.875rem; } /* 14/16 = 0.875 */

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

Откат для старых браузеров: PX

Если вам кажется, что все звучит слишком хорошо чтобы быть правдой, то вы правы. Всегда есть какие-то минусы, и в данном случае это – старые браузеры. Сервис http://caniuse.com/rem покажет вам, чего следует ожидать. И если честно, можно ожидать довольно многого:

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

Недостатки данного метода связаны – как обычно – с названиями браузеров, и на этот раз дело касается IE версиями моложе 9, а также Opera Mini. Именно эти друзья делают необходимым реализовать запасной вариант в PX. Учитывая вышеприведенный пример, все должно выглядеть следующим образом:

html { font-size: 100%; }   
h1 {
font-size: 28px;
font-size: 1.75rem;
}
h2 {
font-size: 22px;
font-size: 1.375rem;
}
p {
font-size: 14px;
font-size: 0.875rem;
}

Современные браузеры будут считывать и переписывать px-значение теми, что указаны в rem, а старые браузеры будут придерживаться инструкции в px, и игнорировать вторую строку. Примерно таким мы и видели этот процесс…

Ссылки

* В защиту rem – Tech Time
* Могу ли я использовать rem? – caniuse.com
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: rem, шрифты, адаптивный дизайн
Опубликовал Design FactoRy   Прочитано (раз): 27722   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 16 сентября 2015 @ 16:46
Написал: Жорик Приемов — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Хорошая статья, спасибо!
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31