Rem - масштабируемые единицы измерения

Reading time ~11 minutes

Статья написана в далеком 2011 году одним товарищем по имени Jonathan Snook.

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

Материальчик понравился и я решил, что я лучше не смогу его написать, чем как просто перевести. Вопрос хорошо освещен - кратко и по делу, с необходимыми примерами.

Думаю, в следующих своих верстках я буду применять именно тот подход, который описан здесь. Ниже - мой вольный перевод.

Размер шрифта в rem

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

Наиболее популярны два метода определения размера шрифта:

  • размер шрифта в пикселях 
    1

    px
  • размер шрифта в 
    1

    em

Давайте сделаем краткий обзор обоих методов, прежде чем я представлю еще один - волшебный третий способ.

Размер шрифта в 
1

px

С самого первого дня, когда зародился Интернет, мы (веб-мастера) использовали пиксели для задания размеров текста. Это надежный и понятный способ.

К сожалению, пользователи Internet Explorer - даже IE9 - не имеют возможности изменять размер текста, используя для этого встроенную функцию браузера.

Для веб-мастеров, которые озабочены такой возможностью, это большая проблема. Последние свежие версии браузера IE имеют встроенную функцию масштабирования, которая увеличивает размер ВСЕГО на странице - эта возможность присутствует во всех остальных браузерах, поддерживающих веб-стандарты. Это несколько сглаживает недостатки браузеров и данного метода, в частности.

Исходя из своего личного опыта, могу сказать, что использование пикселей предоставляет для меня надежную структуру будущего сайта. Пользователи браузеров имеют достаточно средств, чтобы подстроить сайт под свои предпочтения. Но я отвлекся от темы. Что еще у нас есть в наличии?

Размер шрифта в 
1

em

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

1

em
.

Впервые об этом способе написал в далеком 2004-м году Richard Rutter в своей статье How to size text using ems.

Этот способ основан на задании основного размера шрифта для 

1

body
в процентах. В этом случае 
1

1em
равен 
1

10px
, вместо 
1

16px
по-умолчанию.

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

1

14px
, нужно установить его в 
1

1.4em
:

body { font-size: 62.5%; }
  h1 { font-size: 2.4em; } /* =24px */
  p  { font-size: 1.4em; } /* =14px */
  li { font-size: 1.4em; } /* =14px? */

Проблема с размерами шрифта в 

1

em
заключается в том, что такая система достаточно сложна при применении ее на практике. В примере, приведенном выше, размер шрифта элемента 
1

li
равен не 14px, а 20px.

Если добавить еще один вложенный уровень, то размер шрифта будет 27px! Происходит это вследствие наследования свойств в CSS-таблицах.

Чтобы избежать такого эффекта, нужно явно прописать для каждого дочернего элемента размер шрифта в 1em:

body { font-size:62.5%; }
  h1 { font-size: 2.4em; } /* =24px */
  p  { font-size: 1.4em; } /* =14px */
  li { font-size: 1.4em; } /* =14px? */
  li li, li p /* etc */ { font-size: 1em; }

Проблема наследования при системе задания размеров шрифта в em достаточно неудобна. Что же можно еще предложить для решения проблемы?

Размер шрифта в 
1

rem

Стандарт CSS3 вводит в обиход несколько новых единиц измерения, одной из которых является 

1

rem
, что является сокращением от “root em”. Давайте немного разберемся, что из себя представляет эта единица измерения.

Единица измерения 

1

em
является относительной к размеру шрифта элемента родителя, что приводит к эффекту наследования. Единица измерения 
1

rem
является относительной к основному корневому элементу, то есть к html.

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

1

rem
) относительно корневого элемента:

html { font-size: 62.5%; }
  body { font-size: 1.4rem; } /* =14px */
  h1   { font-size: 2.4rem; } /* =24px */

В примере, показанном выше, базовый размер шрифта установлен в процентах 

1

62,5%
, что очень похоже, как мы поступали с единицами 
1

em
. Другими словами, единица измерения 
1

rem
лишена недостатков 
1

em
с ее каскадностью и наследованием правил.

Но как насчет скудной поддержки этой единицы измерения в браузерах?

Вы будете сильно удивлены, но поддержка 

1

rem
в браузерах достойная: Safari 5, Chrome, Firefox 3.6+ и даже Internet Explorer 9. Хорошая новость заключается в том, что в IE9 поддерживается изменение размера текста, установленного в единицах измерения 
1

rem
. Увы, бедная Opera (вплоть до версии 11.10, по крайней мере), не имеет поддержки единиц измерения 
1

rem
.

Как же нам поступить с браузерами, которые не поддерживают единицы измерения 

1

rem
? Для них мы можем выполнить откат 
1

fallback
в виде пикселей 
1

px
. То есть, мы одновременно будем задавать размер шрифта в 
1

px
и в 
1

rem
:

html { font-size: 62.5%; } 
  body { font-size: 14px; font-size: 1.4rem; } /* =14px */
  h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

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

Декабрь 13 2011 - Opera 11.60 теперь поддерживает единицы измерения 

1

rem
.

Конец статьи и перевода. В дополнение я могу сказать, что на сайте CSS Tricks также есть интересный материал по поводу 

1

rem
.

В частности, на нем приведены удобные 

1

mixin
‘ы для SASS, с помощью которых можно быстро задать размер шрифта в 
1

rem
(с 
1

fallback
в 
1

px
):

html{
  font-size: 62,5%;
}

@mixin font-size($sizeValue: 1.6) {
  font-size: ($sizeValue * 10) + px;
  font-size: $sizeValue + rem;
}

Пример использования этого SASS-mixin’а:

p{
  @include font-size(1.8);
}

… что при компиляции в CSS будет выглядеть следующим образом:

p{
  font-size: 18px;
  font-size: 1.8rem;
}

И еще несколько разновидностей SASS-mixin’ов, которые могут пригодиться. Подмешивания используются для задания размера шрифта и интерлиньяжа (высоты строки):

@mixin fontSize($sizeValue: 12 ){
    font-size: $sizeValue + px; //fallback for old browsers
    font-size: (0.125 * $sizeValue) + rem;
  }

  /* Как подключать
  --------------------*/
  p{
    @mixin fontSize(20);
  }

  /* Результат компиляции в CSS
  -------------------------------*/
  p{
    font-size: 20px;
    font-size: 2.5rem;
  }
@mixin lineHeight($heightValue: 12 ){
    line-height: $heightValue + px; //fallback for old browsers
    line-height: (0.125 * $heightValue) + rem;
  }

  /* Как подключить
  -------------------*/
  p{
    @mixin lineHeight(18);
  }

  /* Результат компиляции в CSS
  --------------------------------*/
  p{
    line-height: 18px;
    line-height: 2.25rem;
  }

А здесь представлен “полный” 

1

mixin
, с помощью которого можно одновременно задать кегль и 
1

line-height
. Удобная штучка - можно задать только размер шрифта и получить на выходе интерлиньяж и кегль в пикселях (и 
1

rem
‘ах):

@mixin fontsize($size:1.6, $line: $size * 1.5){
    font-size:   ($size * 10) + px;
    line-height: ($line * 10) + px;
    font-size:   $size + rem;
    line-height: $line + rem;
  }

  /* Как подключить
  -------------------*/
  p{
    @mixin fontsize(1.8);
  }

  /* Результат компиляции в CSS
  -------------------------------*/
  p{
    font-size: 18px;
    line-height: 27px;
    font-size: 1.8rem;
    line-height: 2.7rem;
  }

P.S.

Постепенно изучаю вопрос создания тем под WordPress. Скачал версию 3.7.1, установил под локальный сервер XAMPP и открыл файл 

1

style.css
стандартной темы “Twenty Twelve”. И в заголовке этого файла сразу же наткнулся на следующие интересные строки:

/* =Notes
--------------------------------------------------------------
This stylesheet uses rem values with a pixel fallback. The rem
values (and line heights) are calculated using two variables:

$rembase:     14;
$line-height: 24;

---------- Examples

* Use a pixel value with a rem fallback for font-size, padding, margins, etc.
	padding: 5px 0;
	padding: 0.357142857rem 0; (5 / $rembase)

* Set a font-size and then set a line-height based on the font-size
	font-size: 16px
	font-size: 1.142857143rem; (16 / $rembase)
	line-height: 1.5; ($line-height / 16)

---------- Vertical spacing

Vertical spacing between most elements should use 24px or 48px
to maintain vertical rhythm:

.my-new-div {
	margin: 24px 0;
	margin: 1.714285714rem 0; ( 24 / $rembase )
}

---------- Further reading
http://snook.ca/archives/html_and_css/font-size-with-rem
http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/

То есть, что нам сообщают разработчики WordPress в этих строках? Что данный файл стилевых правил использует для построения дизайна сайта два значения в качестве переменных:

$rembase:     14;
$line-height: 24;

… в единицах измерения 

1

rem
с откатом 
1

fallback
в пиксели 
1

px
. И далее приводятся примеры того, как применяются обе эти переменные для построения стилевых правил и как производится вычисление нужных величин, являющихся производными от этих переменных.

В самом конце две ссылки по тематике 

1

rem
для любознательных, первой из которых является вольный перевод, который вы читаете! Значит, я на правильном пути.

Read More

Ошибка с версией Node.js

Довольно часто в своей практике сталкиваюсь с такой ошибкой, когда запускаю локально сторонний проект:```bash$ npm run start> dom-moving-...… Continue reading

Mangling Angular

Published on February 15, 2024

Constructor parameter without access modifier

Published on February 04, 2024