Использование единицы REM при задании величины шрифта в HTML документах.
В CSS3 введено несколько новых единиц, включая rem, которая означает root em. Давайте разберемся, что такое rem и как он работает. В предыдущей статье Размерность шрифтов указывалось, что относительная единица выражения величины шрифта em удобна для HTML документов, но не лишена недостатков. Для устранения этих недостатков и была предложена единица rem, которая определяет размер шрифта корневого элемента HTML документа. Что это дает? Теперь можно определить требуемый нам размер шрифта тега html, пусть это будет 1 rem, и затем определять размеры шрифтов всех последующих элементов в процентах от rem, а не от родительского элемента, как это происходит при использовании em.
Например,
html { font-size: 62.5%; } /* размер шрифта корневого элемента = 10px */
body { font-size: 1.4 rem; } /* размер шрифта для элемента body =14px */
h1 { font-size: 2.4 rem; } /* для h1 font-size =24px */
Поскольку по умолчанию в браузерах размер шрифта равен 16px, в примере rem для удобства определен как 62,5% от базового, что составляет 10px
Поддержка браузерами размерности REM
Встает извечный вопрос – а как этот rem поддерживается браузерами?
Вы очень удивитесь, но поддержка браузерами довольно приличная: в Safari 5, Chrome, Firefox 3.6+ и даже в Internet Explorer 9 поддержка rem реализована. Opera поддерживает начиная с 11.6. К моменту появления статьи браузеры мобильных устройств не очень хорошо поддерживали эту единицу, поэтому кто разрабатывает для мобильных устройств, будьте внимательны, проверяйте поддержку.
Что же делать в случае браузеров, которые не поддерживают rem? Можно использовать резервный вариант, используя px. Для реализации этого мы должны сначала указать величину font-size в пикселях px, а следом повторить атрибут, используя rem, как в примере ниже.
html { font-size: 62.5%; }
body { font-size: 14 px; font-size: 1.4 rem; }
h1 { font-size: 24 px; font-size: 2.4 rem; }
Вот и все, теперь у нас есть последовательный и предсказуемый размер шрифтов во всех браузерах, и масштабируемый текст во всех текущих версиях основных браузеров.