Rem css что это
Что такое px, em, rem в CSS
Многие люди путаются при работе с этими тремя единицами в CSS. Главной причиной этого является отсутствие понимания различий имеющихся между ними.
Для начала нужно усвоить базовое понимание этих единиц:
Что такое Px
Пиксели представляют собой неделимые объекты прямоугольной или круглой формы, размеры которых зависят от диагонали экрана устройства. Пиксель– это фиксированная единица, которая применяется к отдельным элементам там, где она определяется.
Эта строка кода CSS устанавливает размер шрифта в 10px и отступы размером в 10px со всех сторон.
Единица измерения rem зависит от размера шрифта, заданного в браузере по умолчанию, или размера шрифта, при именного к элементу html. Если базовый размер меняется, то значение rem также изменяется. Вы можете изменить размер шрифта, используемый по умолчанию, в настройках браузера.
Допустим, размер шрифта, используемый по умолчанию в браузере – 14px.
Этот код установит размер шрифта в 10px и отступы в 140px с каждой стороны. При этом базовым будет размер шрифта по умолчанию, заданный в браузере, который берётся за 1rem. То есть: 14px = 1rem, поэтому 10rem = 14px * 10 = 140px.
Путаница между em и rem
Вложенные элементы
Этот код установит размер шрифта родительского элемента в 10px, а шрифт дочернего элемента в 5px.Так как его размер зависит от значения font-size родительского элемента, которое принимается за 1em. То есть:10px = 1em, поэтому 0.5em = 10px / 2 = 5px.
Комбинированный пример
Предположим, что размер шрифта, используемый по умолчанию в браузере,составляет 14px. Как это отразится на всех трёх единицах измерения?
Ключевым для стилей дочернего элемента является свойство font-size, поскольку оно наследуетсяот родительского элемента.Для него размер шрифта задан в 10px, а в дочернем элементе он установлен в 0.5em. То есть, делится на два (как размер шрифта дочернего элемента).
Поля зависят от размера шрифта текущего элемента. За 1em принимается размер в 5px, (размер шрифта дочернего элемента).
Только отступы постоянны в обоих случаях. Они напрямую наследуются от корневого элемента html. Базовый размер шрифта в 14px неизменен, поэтому поля будут иметь размер 140px в обоих случаях.
Заключение
Чтобы преодолеть эту путаницу в единицах измерения, нужно знать, какие элементы зависят от настроек браузера, а какие основаны на размере экрана пользовательского устройства.
Пожалуйста, опубликуйте ваши мнения по текущей теме материала. За комментарии, дизлайки, отклики, подписки, лайки низкий вам поклон!
Дайте знать, что вы думаете по этой теме в комментариях. Мы крайне благодарны вам за ваши комментарии, дизлайки, отклики, подписки, лайки!
November 13, 2013
Статья написана в далеком 2011 году одним товарищем по имени Jonathan Snook.
Размер шрифта в rem
Определение единиц измерения текста всегда было темой горячих споров, даже в наши дни. К сожалению, на сегодняшний день все еще существуют многочисленные “за” и “против” для каждого из методов определения универсальной единицы измерения шрифта. Вопрос заключается в том, чтобы выбрать наиболее приемлемую из всех приемлемых.
Наиболее популярны два метода определения размера шрифта:
Размер шрифта в px
С самого первого дня, когда зародился Интернет, мы (веб-мастера) использовали пиксели для задания размеров текста. Это надежный и понятный способ.
Исходя из своего личного опыта, могу сказать, что использование пикселей предоставляет для меня надежную структуру будущего сайта. Пользователи браузеров имеют достаточно средств, чтобы подстроить сайт под свои предпочтения. Но я отвлекся от темы. Что еще у нас есть в наличии?
Размер шрифта в em
Впервые об этом способе написал в далеком 2004-м году Richard Rutter в своей статье How to size text using ems.
Проблема с размерами шрифта в em заключается в том, что такая система достаточно сложна при применении ее на практике. В примере, приведенном выше, размер шрифта элемента li равен не 14px, а 20px.
Если добавить еще один вложенный уровень, то размер шрифта будет 27px! Происходит это вследствие наследования свойств в CSS-таблицах.
Чтобы избежать такого эффекта, нужно явно прописать для каждого дочернего элемента размер шрифта в 1em:
Проблема наследования при системе задания размеров шрифта в em достаточно неудобна. Что же можно еще предложить для решения проблемы?
Размер шрифта в rem
Единица измерения em является относительной к размеру шрифта элемента родителя, что приводит к эффекту наследования. Единица измерения rem является относительной к основному корневому элементу, то есть к html.
Это означает, что можно установить размер шрифта только один раз, для элемента html. Для всех остальных элементов, которые являются потомками этого элемента, достаточно установить размер шрифта в процентах ( rem ) относительно корневого элемента:
Но как насчет скудной поддержки этой единицы измерения в браузерах?
И пожалуйста, теперь мы имеем прочную и предсказуемую структуру во всех браузерах.
В частности, на нем приведены удобные mixin ‘ы для SASS, с помощью которых можно быстро задать размер шрифта в rem (с fallback в px ):
Пример использования этого SASS-mixin’а:
… что при компиляции в CSS будет выглядеть следующим образом:
И еще несколько разновидностей SASS-mixin’ов, которые могут пригодиться. Подмешивания используются для задания размера шрифта и интерлиньяжа (высоты строки):
Постепенно изучаю вопрос создания тем под WordPress. Скачал версию 3.7.1, установил под локальный сервер XAMPP и открыл файл style.css стандартной темы “Twenty Twelve”. И в заголовке этого файла сразу же наткнулся на следующие интересные строки:
То есть, что нам сообщают разработчики WordPress в этих строках? Что данный файл стилевых правил использует для построения дизайна сайта два значения в качестве переменных:
В самом конце две ссылки по тематике rem для любознательных, первой из которых является вольный перевод, который вы читаете! Значит, я на правильном пути.
Единицы измерения: px, em, rem и другие
В этом очерке я постараюсь не только рассказать о различных единицах измерения, но и построить общую картину – что и когда выбирать.
Пиксели: px
Пиксель px – это самая базовая, абсолютная и окончательная единица измерения.
Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.
Для мобильных устройств, у которых много пикселей на экране, но сам экран маленький, чтобы обеспечить читаемость, браузер автоматически применяет масштабирование.
Вот, если интересно, их значения:
Так как браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет.
В реальной жизни сантиметр – это эталон длины, одна сотая метра. А пиксель может быть разным, в зависимости от экрана.
Но в формулах выше под пикселем понимается «сферический пиксель в вакууме», точка на «стандартизованном экране», характеристики которого описаны в спецификации.
Поэтому ни о каком соответствии cm реальному сантиметру здесь нет и речи. Это полностью синтетическая и производная единица измерения, которая не нужна.
Относительно шрифта: em
1em – текущий размер шрифта.
Размеры в em – относительные, они определяются по текущему контексту.
Например, давайте сравним px с em на таком примере:
24 пикселей – и в Африке 24 пикселей, поэтому размер шрифта в
А вот аналогичный пример с em вместо px :
Так как значение в em высчитывается относительно текущего шрифта, то вложенная строка в 1.5 раза больше, чем первая.
Что такое «размер шрифта»? Это вовсе не «размер самой большой буквы в нём», как можно было бы подумать.
Размер шрифта – это некоторая «условная единица», которая встроена в шрифт.
Эти единицы используются чрезвычайно редко, так как «размер шрифта» em обычно вполне подходит.
Проценты %
Когда мы говорим «процент», то возникает вопрос – «Процент от чего?»
Как правило, процент будет от значения свойства родителя с тем же названием, но не всегда.
Это очень важная особенность процентов, про которую, увы, часто забывают.
Отличный источник информации по этой теме – стандарт, Visual formatting model details.
В примере выше процент берётся от размера шрифта родителя.
А вот примеры-исключения, в которых % берётся не так:
Единица rem: смесь px и em
Итак, мы рассмотрели:
Может быть, пора уже остановиться, может этого достаточно?
Э-э, нет! Не все вещи делаются удобно.
Вернёмся к теме шрифтов. Бывают задачи, когда мы хотим сделать на странице большие кнопки «Шрифт больше» и «Шрифт меньше». При нажатии на них будет срабатывать JavaScript, который будет увеличивать или уменьшать шрифт.
Вроде бы, использовать можно, однако есть проблема.
Ремы, емы, и почему отказ от них — не проблема
Возможно, вы слышали, что при определении размера элементов на вашем сайте, вы должны использовать em или rem единицы, а не старые добрые пиксели.
Вы, вероятно, слышали такие словечки как «доступность», «подвижность» и «гибкость», и думали, что это звучит как довольно хорошая идея. Может быть, вы даже считаете, что использовать только пиксели — это любительский ход.
Ну, у меня есть для вас фантастические новости. Вам не нужно усложнять свою жизнь этими надоедливыми единицами.
Пиксели чувствуют себя отлично. На самом деле получается, что пиксели действительно хороши для задания нужного вам размера.
В идеальном мире все просто будут верить всему, что я говорю, без того, чтобы требовать какие-то «доказательства». Но мне сказали, что это не так, поэтому, пожалуйста, читайте дальше, и я с готовностью оценю каждую из причин использования этих дурацких единиц измерения.
1. Это делает сайты более доступными (для людей с ограничениями)
Или конкретнее: «используйте rem, и ваш макет будет лучше масштабироваться, если пользователь увеличивает страницу».
Люди склонны излишне много размышлять о доступности. На днях я видел вопрос (комментарий на YouTube, не меньше) — кто-то ищет инструмент для тестирования доступности. Что-то «более тщательное», чем просто соответствие WCAG.
Вот, я сделал один такой для вас:
Я также продаю более крупную модель для мониторов до 30 дюймов (это полотенце). Есть у меня и «универсальная» модель, которая фактически является наволочкой для вашей головы.
Моя точка зрения: вам не нужны глубокие знания и причудливые инструменты для разработки, если rem и em «лучше для доступности»* — просто представьте, что у вас плохое зрение. Если у вас слабое воображение, оберните экран в ClingWrap ( торговая марка производителя пищевой плёнки, — прим. пер.) (или в то, что вы используете вместо ClingWrap в своей странной стране).
* Конечно, доступность — это не только читабельность, но в данном случае мы говорим только о ней.
Теперь спросите себя незрячего, какую из этих трех вещей вы выберете, чтобы сделать текст на вашем компьютере более читабельным:
Не знаю насчёт вас, но если бы у меня были проблемы с чтением мелких текстов, я бы увеличил размер шрифта по умолчанию для ОС и забыл об этом.
(Так же этот трюк удобен для показа презентаций)
Давайте нырнём поглубже.
Для проведения расследования я накидал простой демо сайт. (Вот jsbin, если по какой-то необъяснимой причине вам это интересно.)
Вот как они выглядят при масштабе по умолчанию (где 1em = 16px ).
А вот и Chrome в Windows, с увеличением текста на 150% средствами ОС.
Затем, я установлю масштабирование ОС обратно на 100% и поменяю масштаб в браузере. Это для сайтов, которые считают 12px для основного текста навигации приемлемым, потому что можно так разместить больше на экране. Не хочу называть имена, но…
Это Amazon. Размер шрифта по умолчанию 13px, 12px для навигации на верхнем уровне. Не круто.
К счастью, производители браузеров не разделяют презрение Amazon к пожилым людям и позволяют увеличивать изображение с помощью нажатия клавиши и прокрутки.
У меня глаза как у гончей ( на самом деле у гончих не такое уж хорошее зрение, их выручает феноменальное обоняние, — прим. пер.), и все-таки я масштабирую некоторые сайты. Я делаю это и для Chrome DevTools, где размер шрифта по умолчанию 12px, но их я как-то прощаю.
(Примечание: если вы находите, что размер шрифта в Википедии несколько мал, или вам не нравится, как текст растягивается по всей странице, в 2013 году я написал расширение Skinny для Chrome, позволяющее сократить длину строк и увеличить размер шрифта.)
Вернемся к примеру. Давайте посмотрим на тот случай, когда браузер увеличивает масштаб на 150%.
Пользовательский интерфейс браузера (название вкладки, URL и т. д.) снова мелкий, но содержимое страницы выглядит одинаково.
И, наконец, изменим размер шрифта браузера по умолчанию. Сначала мы попробуем Firefox, вот без масштабирования:
И после установки «минимальный размер шрифта» в 20px:
И вот мы в Chrome с размером текста, заданным как «Large».
Ага, наконец-то существенное различие. Заголовок, который был жестко закодирован в 18px, не изменил размер, не изменилась и ширина сине-зелёного навигационного меню, которая установлена на 100px.
Хотя у нас нет данных о том, полагаются ли люди на изменение размера текста в браузере, у нас есть некоторые неоспоримые факты.
Вышеприведенные факты для меня ясно доказывают, что регулировка размера шрифта в браузере бесполезна в реальном мире. И поэтому я не буду учитывать эти установки в своём процессе принятия решений.
Это был аргумент «лучше для доступности», вытащенный из воды. Теперь переходим к…
2. Масштабирование контрольных точек при использовании rem/em
Другими словами, если вы определяете контрольные точки в пикселях, они фиксированы и не изменятся, если ваши пользователи увеличивают страницу. Поскольку пиксель — это пиксель, верно?
В данном случае, контрольными точками автор называет условия, заданные через медиа-запросы: “@media (max-width: 600px)”. Примечание переводчика
Это просто ложь. (Я предполагаю, что в какой-то момент в прошлом это было правдой, люди же не просто так что-то придумывают, не так ли?)
Ниже этого размера текст отправителя и темы располагается вертикально, над ним они расположены бок о бок.
Давайте запустим IE11 для смены темпа. Я увеличиваю страницу до 150%, затем перетаскиваю окно так, чтобы оно было шириной около 900 пикселей. (Для тех, кому важна математика, это 600px × 150%.)
Итак, как вы думаете, что IE11 будет делать?
Считает ли он, что контрольная точка абсолютна на 600px все время, и, следовательно, показывает изображение на весь экран? Или он отрегулирует эту контрольную точку на 150%, так что изменение произойдет на 900px (в этом случае, мы получим узкий вертикальный текст)?
Я был достаточно удивлен, обнаружив, что IE действительно масштабировал мои контрольные точки при увеличении.
И это в древнем IE11. А как насчет других браузеров…
Safari сделал именно то, что я ожидал. (Что странно.)
3. Используйте em для «динамического» задания отступов вокруг текста
Я понимаю, я действительно так делаю. Я просто предпочитаю быть точным и установить, скажем, размер шрифта и отступы для кнопки так, чтобы он был ровно 60 пикселей на больших экранах и ровно 50 пикселей на маленьких экранах, визуально соответствуя моей точно заданной в 60px / 50px панели заголовка.
И если мои проекты приходят от профессионального дизайнера, мне еще предстоит встретить того, кому безразлично, какого размера кнопка. Существует ли такое существо?
Но если вы сами проектируете сайт и не очень заботитесь о том, насколько высока эта кнопка или как далеко от заголовка расположен текст абзаца, и хотите, чтобы интервал увеличивался с изменением размера шрифта, тогда использование em для margin / padding — правильный рабочий инструмент.
4. Создавайте модули, размер которых можно изменить, просто изменив font-size корневого элемента
Написание этих слов, которые вы так любезно читаете, были подстегнуто сообщением в блоге, которое вышло несколько недель назад. Создайте отзывчивый сайт используя задание размеров через em.
Это имеет смысл. Точно так же, как имеет смысл фраза: «если вы часто убиваете людей, удобно держать лопату в багажнике вашего автомобиля».
Я уверен, это отличный совет. Но я не могу вспомнить последний раз, когда я совершил убийство, и я не могу вспомнить, когда в последний раз я нуждался в компоненте, который увеличивается во всех измерениях, отступах и размерах шрифта на один и тот же множитель, через изменение только одного значения.
Вот мой совет. Когда вы начинаете проект, спросите себя: нужно ли мне создавать какие-либо модули, которые иногда бывают определенного размера, а в другом случае будут на 10% больше в каждом измерении. Если да, следуйте рекомендациям в сообщении в блоге выше, это именно то, что вы ищете. (И положи лопату в багажник, ты, сумасшедший.)
Вы можете масштабировать весь текст на своей странице с помощью одного свойства
(Я решил больше не нумеровать заголовки.)
Другая загадочная причина использования em выглядит следующим образом: вы определили размер шрифта в своем CSS, всего, например, в 50 разных местах. Вы хотите, чтобы все 50 случаев отображались крупнее на больших экранах, а на меньшем экране — меньше, и это порождает множество медиа-запросов.
Эту проблему, по-видимому, лучше всего решить, используя rem везде, а затем изменив размер корневого шрифта в ваших медиа-запросах. Бум! Весь ваш текст сразу изменит размер.
Я думаю, что этот совет можно смело игнорировать по двум причинам. Я перечислил их для вас.
Вот что, когда у вас есть отдельный файл только для типографики, и у вас есть, скажем, 12 стилей, и для каждого стиля у вас есть разные размеры для четырех размеров экрана, это 48 различных объявлений размера шрифта и, возможно, высоты строк, отступов, и межбуквенных расстояний тоже. Как однажды сказал Уинстон Черчилль, «это очень много».
Теперь, легко увидеть все это и подумать: «О нет, это означает кучу повторений, нам нужно сделать это по-другому — чего бы это не стоило — чтобы избежать повторения».
Не дайте своему сайту потеряться в космосе.
О, и это не просто разные единицы, а текст в какой-то части вашего приложения, который меняет размер в зависимости от размера шрифта в каком-то другом месте? Это полная противоположность инкапсуляции, она говорит тьфу детерминизму, и просто напрашивается на неприятности.
Итак… подумайте о своей типографике, настройте её один раз, сделайте это в пикселях, справьтесь с небольшим количеством повторений, воспользуйтесь тем, что ваш текст будет таким, каким вы его задали, затем забудьте об этой проблеме.
Эта напыщенная речь продолжалась гораздо дольше, чем то, что вы только что прочли, но я написал остальное в письме и не отправил его.
В заключение
Я думаю, все это сводится к следующему: бывают случаи, когда вы должны использовать rem и em, они же присутствуют в спецификации по какой-то причине. Но сценариев, в которых вы в них нуждаетесь, все меньше и меньше, чем может показаться.
Поэтому не ищите причины использовать em и rem. Достаточно того, что они делают. Используйте пиксели, и если сценарий покажет, что em или rem являются в данном случае лучшим инструментом, перейдите на них.
Бонусный уровень: По теме единиц
Советы, что написаны ниже имеют мало общего с этой статьей, поэтому я перечислю их без реального объяснения того, что они здесь делают, и не предлагаю никакого финального текста. Это будет неудовлетворительно.
REM vs EM – Великий спор
Представляю вашему вниманию перевод достаточно большой и объемной статьи по поводу вечного спора, какие же единицы измерения использовать при верстке: em‘ы или rem‘ы. В каких случаях стоит использовать одни единицы, а в каких другие. Вас ожидает много кода, примеров и их объяснений.
Добро пожаловать в мир типографики и относительных единиц измерения =)
************
Одним из наиболее эффективных методов типографики в вебе является использование относительных единиц измерения rem и em.
Вопрос в том, что использовать? Уже долго длится спор между приверженцами rem’ов и em’ов, которые пытаются доказать, что нужно использовать именно «их» единицы.
В этой статье я возьму на себя смелость провести сравнение между rem и em. Вы узнаете что из себя представляют rem, а что em, и как их использовать для построения модульных компонентов.
Что такое EM?
em — в типографике относительная единица длины, равная размеру текущего шрифта
Это утверждение не имеет смысла в вебе, так как мы не используем размер точки (point-size). Но имеет смысл, если мы заменим размер точки на размер шрифта (font-size).
Это значит, что: 1em = 20px в том случае, когда у css-селектора прописано правило font-size: 20px;
Единица em может использоваться для того, чтобы задавать размеры шрифтов. По факту, использование относительных величин, например, em, для font-size, является хорошей практикой.
Какой на самом деле font-size у h1?
Нам придется взглянуть на родительский элемент, чтобы высчитать размер шрифта у этого h1. Допустим, что родительский элементом является html, и его font-size установлен в 16px.
Следуя этому, мы можем увидеть, что высчитанное значение h1 составляет 32px, или 2 * 16px.
На самом деле, плохая затея устанавливать font-size для html в пикселях (px), так как тем самым мы переопределяем установки браузера пользователя.
Заместо этого вы можете выбрать проценты в качестве значения font-size, или просто не задавайте его в html.
Заметка: font-size будет установлен в 100%, если вы сами его не задали.
Для большинства пользователей (и браузеров), размер шрифта в 100% будет по умолчанию выдавать 16px до тех пор, пока они его не поменяют в настройках своего браузера. Хотя редко кто подобным занимается.
Ладно, что дальше? Вернемся к em.
Em также используется, чтобы задать значения для других свойств, в дополнение к font-size. margin и padding являются двумя из тех свойств, которые измеряются в em’ах.
Вот где большинство людей путается со значениями em.
Рассмотрим следующий код. Каким будет значение margin-bottom для обоих элементов: h1 и p? (Предположим, что font-size у элемента html установлен в 100%)
Удивлены, что значение margin-bottom, установленное в 1em, разное в обоих случаях?
Это явление объясняется тем, что 1em равен размеру шрифта (font-size) своего элемента. Так как font-size у элемента h1 был установлен в 2em, то другие свойства у этого h1 (тот же margin-bottom) уже будут отталкиваться от нового значения font-size. То есть для них 1em будет равен уже 32px.
Людей сбивает с толку тот факт, что 1em может принимать различные значения в разных участках кода. Подобное может вас конкретно запутать, если вы только-только начали разбираться с em.
Вот такие вот эти em. Что ж, идем далее. Впереди нас ждут rem’ы.
Что такое REM?
Rem — это корневой em (Root Em). Он создан, чтобы облегчить вычислительные проблемы, с которыми многие иногда сталкиваются.
Это единица типографики, равная корневому (базовому) значению font-size. Это значит, что 1rem всегда будет равен значению font-size, которое было определено в html.
Рассмотрим тот же самый код, что и выше, только будем использовать уже rem’ы. Как теперь изменится значение margin-bottom?
Как видите, 1rem всегда будет принимать значение, равное 16px, и не имеет значения где вы примените его (до тех пор, пока не поменяете font-size у элемента html)
Существует зависимость. Это несложно понять.
Такие вот rem’ы. Не так сложно понять как они работают, зная как работают em’ы, согласны?
Теперь, приступим к самой вкусной части статьи. Итак, rem или em?
REM’ы или EM’ы?
Это очень спорный вопрос.
Некоторые разработчики полностью избегают использование rem, утверждая, что использование этих единиц измерения делают их компоненты менее модульными. Другие разработчики использут их для всего, предпочитая ту простоту, что они предоставляют.
Как ни странно, но я все-таки попался в ловушку, используя em’ы и rem’ы в своей работе на разных этапах разработки. Я был в восторге от того, как em’ы помогали мне в создании модульных компонентов, но я терпеть не мог всех тех сложностей, что они привносили в мой код. Мне также нравилось, как при помощи rem’ов все вычисления проходили гораздо проще, но меня бесили те хаки, которые приходилось писать, чтобы сделать мои компоненты модульными.
Оказывается, у em и rem существуют как сильные, так и слабые стороны. И их нужно использовать по-разному, в зависимоти от обстоятельств.
Как? У меня есть два простых правила:
Стало немного проще? Что ж, давайте рассмотрим написание простого компонента (пусть это будет заголовок), используя и em’ы и rem’ы, и вы сами увидите в действии эти два правила.
Используем только REM’ы для создания элемента заголовка
Скажем, у вас есть элемент заголовка h2, который выглядит вот так: 
Привет! Я — заголовок!
Стили заголовка должны быть подобны нижеуказанным, если вы указываете все в rem:
Далее, давайте создадим заголовок побольше, ведь на одной странице могут располагаться элементы разных размеров.
Когда мы будем это делать, давайте попробуем унаследовать настолько много стилей, насколько это возможно.
Разметка нашего второго заголовка будет выглядеть как-то так:
К сожалению, наш код не стал выглядеть лучше. Слишком мало свободного пространства между краями нашего элемента .header—large и самим текстом заголовка.
Не достаточно свободного пространства между краями и текстом нашего большого заголовка
Ну вот, теперь дышать стало посвободнее!
Что произойдет, если у нас будет больше заголовков различных размеров, или если заголовки должны будут меняться в размере? Вы уже понимаете, как указание значений свойств в rem’ах может вызывать дублирование и супер сложный код.
Как видите, em’ы могут быть невероятно полезны, если у вас имеются свойства, которые нужно масштабировать вместе с размером шрифта элемента. Отсюда и рождается первое правило.
Далее, давайте посмотрим, что будет происходить, если вы будете использовать только em’ы в вашем заголовке.
Используем только EM’ы для создания элемента заголовка
Код реализации заголовка на em’ах не многим отличается от кода на rem’ах, с которым уже познакомились. Все, что нам нужно — это заменить rem’ы на em’ы:
Крайне маловероятно, что ваш сайт будет содержать лишь один элемент заголовка и больше ничего. Нужно рассмотреть как он взаимодействует с другими элементами.
Как правило, эти элементы идут до или после заголовка, как тут:
Заголовки имеют разные связи с другими элементами
Разметка для этого блока будет такой:
Мы также добавим margin-right и margin-left для параграфов:
Ой-ёй, padding у первого заголовка не выровнен вместе с текстом параграфа
Вот теперь все выглядеит как надо!
Как и в предыдущем случае, мы можем упростить наш код, если согласимся использовать вкупе em’ы и rem’ы. В частности, для padding-left и padding-right мы будем использовать rem’ы, а для padding-top и padding-bottom — em’ы.
Как видите, em’ы могут быть невероятно полезны, если у вас имеются свойства, которые нужно масштабировать вместе с размером шрифта элемента. Однако, вы столкнетесь с проблемами, если вам понадобится менять значения свойств относительно корневого (изначального) значения font-size.
Стало более понятно, как работают вместе rem и em в одном компоненте, согласны?
Теперь, давайте поднимемся на ступеньку выше и посмотрим, как заголовок и параграф взаимодействуют с сеткой.
Компоненты на сетке
Прежде, чем мы продолжим, давайте объединим наш заголовок и параграфы в единый компонент:
Вот базовые стили для нашего компонента:
Пока все хорошо. Здесь мы видим все, с чем уже познакомились ранее.
Идем дальше. Этот компонент может быть где угодно на нашем сайте. Например:
Вероятные места, где может располагаться наш компонент
Заголовок нашего компонента должен становиться меньше по размеру (т.е., уменьшаться его font-size), если компонент будет находиться в узкой части сайта, например, в сайдбаре.
Элемент заголовка на сетке
Есть вариант как сделать это. Мы можем модифицировать класс нашего компонента. Разметка теперь примет вот такой вид:
Теперь касательно стилей компонента. Здесь действуют те же самые правила:
Как и в случае с элементом заголовка, вы можете определить, для каких свойств неободимо будет задать размеры в em’ах. Это нужно будет сделать для тех свойств, которые непосредственно взаимодействуют с остальными элементами страницы. Существует два пути, чтобы продумать, как лучше выстроить наш компонент:
Давайте рассмотрим оба случая, пройдем по каждому из путей, и вы поймете, что я имел в виду.
Путь первый. Свойства всех внутренних элементов масштабируются вместе со значением font-size компонента
Давайте начнем с примера, чтобы увидеть, как выглядит такой компонент:
Заметили, как font-size, margin и padding всех элементов внутри компонента изменяются в одно и то же время?
Если ваш компонент ведет себя таким же образом при изменении размеров, то вам нужно все размеры указывать в em’ах. То есть код становится таким:
Затем, чтобы изменения в размерах заработали, необходимо изменить свойство font-size у компонента.
Давайте теперь немного усложним наш пример.
Представьте, что у вас имеется сетка наподобие этой. Вертикальные и горизонтальные отступы на всех устройствах должны оставаться одинаковыми (с эстетической точки зрени это будет правильно).
Одинаковые отступы на сетке вида 1 + 2
Разметка для этой сетки такая:
Я установил промежутки между элементами сетки в 2em, с учетом, что базовый font-size равен 16px. Иными словами, высчитанная ширина каждого промежутка равна 32px.
Задача состоит в следующем: разделить маленькие компоненты A и B отступом в 32px. Для начала, мы можем попробовать установить margin-top компоненту B, равное 2em.
К сожалению, результат не радует. margin между маленькими компонентами A и B больше, чем ширина вертикального промежутка при видимой области (viewport) более 800px.
Пространство между маленькими блоками A и B не такое же, как пространство вертикального промежутка при viewport > 800px
Это происходит потому, что font-size компонента равен 1.5em (или 24px), когда видимая область становится более 800px. В тот момент, когда font-size становится 24px, высчитанное значение 2em становится 48px, которое отличается от 32px, которые мы и добивались получить.
Какое счастье, что мы можем решить эту проблему, просто заменив единицы измерения на rem. Ведь мы знаем, что ширина промежутков изменяется в зависимости от базового font-size.
Вертикальный отступ теперь равен горизонтальным!
Та-да! Проблема решена 🙂 Вот вам пример на Codepen, можете поиграться с кодом.
Заметка: Вам придется использовать Flexbox, чтобы построить такую сетку. Я не буду объяснять, как я ее выстроил, так как это выходит за рамки статьи. Советую почитать эту статью, если хотите узнать больше про Flexbox.
Да, кстати, не я придумал эту технику. Chris Coyier написал об этом год назад (он гений!).
В любом случае, готовы двигаться дальше? Если да, переходим ко второму случаю. Если нет, не стесняйтесь оставлять комментарии, и я постараюсь объяснить это вам каким-то иным способом.
Путь второй. Свойства лишь некоторых внутренних элементов масштабируются вместе со значением font-size компонента.
Первый случай несложно объснить. Недостатком, однако, является то, что вам придется придерживаться вашей модульной сетки (Прим. пер.: что это такое, можете почитать тут), вертикальным ритмам (Прим. пер.: что это такое, можете почитать тут) и вы должны быть уверены, что все компоненты имеют одинаковый размер в одно и то же время (особенно, когда вы делаете адаптивные сайты).
Иногда требуется изменить небольшой участок компонента, не изменяя размеров всего остального.
Например, вам нужно изменить font-size заголовков при большей видимой области (viewport).
Только заголовки меняются в размере, когда меняется видимая область
Давайте опишем стили данного примера, взяв за основу стили, которые мы описали выше:
Как только меняется font-size у заголовка, на границе видимой области в 1200px, мы можем безопасно использовать rem’ы в качестве единиц измерения каждого свойства (за исключением padding-top и padding-bottom у заголовка)
После этого вы можете изменить размер шрифта в заголовке на разных вюьпортах, просто добавив media в них:
Та-да! Заметили, что когда мы ресайзим окно браузера, меняется только font-size у заголовка? Вот так вот и нужно поступать во втором случае 🙂
Еще один момент
Так как рекомендуется использовать лишь несколько размеров типографики, я часто абстрагирую свойство font-size от компонента. Таким образом, я могу быть уверен, что моя типографика останется одинаковой во всех компонентах.
На этом все со вторым случаем. Вот вам пример на Codepen, можете поиграться с кодом.
Я уже предвижу ваш вопрос, поэтому сначала отвечу на него: Какой метод вы должны использовать?
Я скажу, что все зависит от дизайна.
Лично я гораздо чаще пользуюсь вторым, нежели первым, так как предпочитаю абстрагировать типографику в отдельный файл.
Подведем итоги
Что же использовать, rem или em? Я думаю, что данный вопрос не совсем корректен. И rem и em имеют свои сильные и слабые стороны, и их можно использовать вместе, — это поможет вам в написании простых, модульных компонентов!
Теперь касательно вас! Чью сторону вы примите в этом споре? Я бы с радостью почитал в комментариях ниже, что вы думаете по этому поводу:)