Многие люди путаются при работе с этими тремя единицами в CSS. Главной причиной этого является отсутствие понимания различий имеющихся между ними.
Для начала нужно усвоить базовое понимание этих единиц:
- Px (пиксель) – это единица измерения величины объектов относительно размера экрана.
- Em – это единица, основанная на размере шрифта родительского элемента (в пикселях).
- Rem – это единица,основанная на размере шрифта корневого элемента html (в пикселях).
Мы можем использовать эти единицы в различных свойствах CSS, таких как font-size , padding , margin , position .
Пиксели представляют собой неделимые объекты прямоугольной или круглой формы, размеры которых зависят от диагонали экрана устройства. Пиксель– это фиксированная единица, которая применяется к отдельным элементам там, где она определяется.
Эта строка кода CSS устанавливает размер шрифта в 10px и отступы размером в 10px со всех сторон.
Единицы измерения em зависят от размера шрифта родительского элемента. Это не фиксированные единицы, поскольку они зависят от базового размера. Когда изменяется размер родительского элемента, меняется и значение em .
Данный код CSS устанавливает размер шрифта в 10px, и отступы толщиной в 100px с каждой стороны, поскольку размер берётся из свойства font-size . В нем каждое значение принимается за 1em, то есть (10px = 1em, поэтому 10em = 10px * 10 = 100px).
Единица измерения rem зависит от размера шрифта, заданного в браузере по умолчанию, или размера шрифта, при именного к элементу html. Если базовый размер меняется, то значение rem также изменяется. Вы можете изменить размер шрифта, используемый по умолчанию, в настройках браузера.
Допустим, размер шрифта, используемый по умолчанию в браузере – 14px.
Этот код установит размер шрифта в 10px и отступы в 140px с каждой стороны. При этом базовым будет размер шрифта по умолчанию, заданный в браузере, который берётся за 1rem. То есть: 14px = 1rem, поэтому 10rem = 14px * 10 = 140px.
Содержание
Путаница между em и rem
Вопрос, который возникает при использовании этих единиц измерения: «Какие же единицы применять?» Особенно это касается em и rem . Какие элементы установить зависимыми от базового размера,а для каких применять динамические единицы измерения?
- Задача: задать размер элемента относительно размера шрифта, используемого по умолчанию на сайте, там, где не нужно менять размеры. В этом случае “rem” предпочтительнее.
- Чтобы использовать динамические единицы измерения там, где при уменьшении размера шрифта уменьшаются отступы или поля, применяйте “em”.
Вложенные элементы
Для вложенных элементов используется только одна единица измерения – em . Если размеры шрифта или отступов дочернего элемента должны быть наполовину меньше, чем у родительского, тогда используйте em .
Этот код установит размер шрифта родительского элемента в 10px, а шрифт дочернего элемента в 5px.Так как его размер зависит от значения font-size родительского элемента, которое принимается за 1em. То есть:10px = 1em, поэтому 0.5em = 10px / 2 = 5px.
Комбинированный пример
Предположим, что размер шрифта, используемый по умолчанию в браузере,составляет 14px. Как это отразится на всех трёх единицах измерения?
- Размер шрифта = 10px.
- Внутренние поля с каждой стороны (10px = 1em, поэтому 10em * 10px) = 100px.
- Отступы с каждой стороны (14px = 1rem, поэтому 10rem * 14px) = 140px.
- Размер шрифта (0.5em = 10px / 2) = 5px.
- Внутренние поля с каждой стороны (5px = 1em, поэтому 10em * 5px) = 50px.
- Отступы с каждой стороны (14px = 1rem, поэтому 10rem * 14px) = 140px.
Ключевым для стилей дочернего элемента является свойство font-size, поскольку оно наследуетсяот родительского элемента.Для него размер шрифта задан в 10px, а в дочернем элементе он установлен в 0.5em. То есть, делится на два (как размер шрифта дочернего элемента).
Поля зависят от размера шрифта текущего элемента. За 1em принимается размер в 5px, (размер шрифта дочернего элемента).
Только отступы постоянны в обоих случаях. Они напрямую наследуются от корневого элемента html. Базовый размер шрифта в 14px неизменен, поэтому поля будут иметь размер 140px в обоих случаях.
Заключение
Чтобы преодолеть эту путаницу в единицах измерения, нужно знать, какие элементы зависят от настроек браузера, а какие основаны на размере экрана пользовательского устройства.
Данная публикация представляет собой перевод статьи « Use of px, em, rem units in css, which one I have to use and when? » , подготовленной дружной командой проекта Интернет-технологии.ру
В этом очерке я постараюсь не только рассказать о различных единицах измерения, но и построить общую картину – что и когда выбирать.
Пиксели: px
Пиксель px – это самая базовая, абсолютная и окончательная единица измерения.
Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.
Пиксели могут быть дробными, например размер можно задать в 16.5px . Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в 100px , его нужно разделить на три части – волей-неволей появляются 33.333. px . При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.
Для мобильных устройств, у которых много пикселей на экране, но сам экран маленький, чтобы обеспечить читаемость, браузер автоматически применяет масштабирование.
- Главное достоинство пикселя – чёткость и понятность
- Другие единицы измерения – в некотором смысле «мощнее», они являются относительными и позволяют устанавливать соотношения между различными размерами
Существуют также «производные» от пикселя единицы измерения: mm , cm , pt и pc , но они давно отправились на свалку истории.
Вот, если интересно, их значения:
- 1mm (мм) = 3.8px
- 1cm (см) = 38px
- 1pt (типографский пункт) = 4/3 px
- 1pc (типографская пика) = 16px
Так как браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет.
В реальной жизни сантиметр – это эталон длины, одна сотая метра. А пиксель может быть разным, в зависимости от экрана.
Но в формулах выше под пикселем понимается «сферический пиксель в вакууме», точка на «стандартизованном экране», характеристики которого описаны в спецификации.
Поэтому ни о каком соответствии cm реальному сантиметру здесь нет и речи. Это полностью синтетическая и производная единица измерения, которая не нужна.
Относительно шрифта: em
1em – текущий размер шрифта.
Можно брать любые пропорции от текущего шрифта: 2em , 0.5em и т.п.
Размеры в em – относительные, они определяются по текущему контексту.
Например, давайте сравним px с em на таком примере:
24 пикселей – и в Африке 24 пикселей, поэтому размер шрифта в
А вот аналогичный пример с em вместо px :
Так как значение в em высчитывается относительно текущего шрифта, то вложенная строка в 1.5 раза больше, чем первая.
Выходит, размеры, заданные в em , будут уменьшаться или увеличиваться вместе со шрифтом. С учётом того, что размер шрифта обычно определяется в родителе, и может быть изменён ровно в одном месте, это бывает очень удобно.
Что такое «размер шрифта»? Это вовсе не «размер самой большой буквы в нём», как можно было бы подумать.
Размер шрифта – это некоторая «условная единица», которая встроена в шрифт.
Она обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой. То есть, предполагается, что в эту высоту помещается любая буква или их сочетание. Но при этом «хвосты» букв, таких как р , g могут заходить за это значение, то есть вылезать снизу. Поэтому обычно высоту строки делают чуть больше, чем размер шрифта.
В спецификации указаны также единицы ex и ch, которые означают размер символа "x" и размер символа "0" .
Эти размеры присутствуют в шрифте всегда, даже если по коду этих символов в шрифте находятся другие значения, а не именно буква "x" и ноль "0" . В этом случае они носят более условный характер.
Эти единицы используются чрезвычайно редко, так как «размер шрифта» em обычно вполне подходит.
Проценты %
Проценты % , как и em – относительные единицы.
Когда мы говорим «процент», то возникает вопрос – «Процент от чего?»
Как правило, процент будет от значения свойства родителя с тем же названием, но не всегда.
Это очень важная особенность процентов, про которую, увы, часто забывают.
Отличный источник информации по этой теме – стандарт, Visual formatting model details.
Вот пример с % , он выглядит в точности так же, как с em :
В примере выше процент берётся от размера шрифта родителя.
А вот примеры-исключения, в которых % берётся не так:
margin-left При установке свойства margin-left в % , процент берётся от ширины родительского блока, а вовсе не от его margin-left . line-height При установке свойства line-height в % , процент берётся от текущего размера шрифта, а вовсе не от line-height родителя. Детали по line-height и размеру шрифта вы также можете найти в статье Свойства font-size и line-height. width/height Для width/height обычно процент от ширины/высоты родителя, но при position:fixed , процент берётся от ширины/высоты окна (а не родителя и не документа). Кроме того, иногда % требует соблюдения дополнительных условий, за примером – обратитесь к главе Особенности свойства height в %.
Единица rem: смесь px и em
Итак, мы рассмотрели:
- px – абсолютные, чёткие, понятные, не зависящие ни от чего.
- em – относительно размера шрифта.
- % – относительно такого же свойства родителя (а может и не родителя, а может и не такого же – см. примеры выше).
Может быть, пора уже остановиться, может этого достаточно?
Э-э, нет! Не все вещи делаются удобно.
Вернёмся к теме шрифтов. Бывают задачи, когда мы хотим сделать на странице большие кнопки «Шрифт больше» и «Шрифт меньше». При нажатии на них будет срабатывать JavaScript, который будет увеличивать или уменьшать шрифт.
Вообще-то это можно сделать без JavaScript, в браузере обычно есть горячие клавиши для масштабирования вроде Ctrl + + , но они работают слишком тупо – берут и увеличивают всю страницу, вместе с изображениями и другими элементами, которые масштабировать как раз не надо. А если надо увеличить только шрифт, потому что посетитель хочет комфортнее читать?
Какую единицу использовать для задания шрифтов? Наверно не px , ведь значения в px абсолютны, если менять, то во всех стилевых правилах. Вполне возможна ситуация, когда мы в одном правиле размер поменяли, а другое забыли.
Следующие кандидаты – em и % .
Разницы между ними здесь нет, так как при задании font-size в процентах, эти проценты берутся от font-size родителя, то есть ведут себя так же, как и em .
Вроде бы, использовать можно, однако есть проблема.
Попробуем использовать этот подход для
.
Дата публикации: 2015-11-09
От автора: сегодня мы рассмотрим еще один тип единиц измерения rem в css. Данный тип отлично поддерживается браузерами и полифиллами в случае со старыми обозревателями.
Описание
Единицы измерения rem в CSS что это? Если вы любитель музыки, то должно быть сталкивались с группой «REM». Но в отличие от своих коллег «Rapid Eye Movement» наш rem расшифровывается, как «root em». Данный тип единиц измерения создан для гармонии и баланса с дизайном. Определение одной единицы rem на W3C:
Равная вычисленному значению свойства font-size для основного текста. Если свойство font-size установлено для основного текста, то rem единицы связываются с этим свойством.
Это значит, что 1rem равен размеру текста для тега html (в большинстве браузеров по умолчанию это 16px).
Rem против Em
Основная загвоздка с em в том, что они определяются по размеру текста конкретного элемента. Кроме того, они наследуются, что приводит к непредсказуемым последствиям. Рассмотрим следующий пример. Списки будут иметь шрифт 12px, а основной текст 16px:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Если наш список вложен в другой список, размер шрифта внутреннего будет составлять 75% от родителя, т.е. 9px. Можно исправить это так:
Это решает проблему, однако не стоит забывать о более глубоком наследовании. С rem все намного проще:
Так как все размеры шрифтов определяются по корневому тексту, нам не нужно следить за всевозможными случаями вложенности.
Размер текста в Rem
Jonathan Snook в своей статье Размер текста в Rem в мае 2011 г. был одним из первопроходцев в применении данных единиц измерения к шрифтам. Как и множество других CSS разработчиков, он столкнулся с проблемой с em единицами в сложных макетах.
В то время IE еще занимал большую долю рынка, и разработчики не могли масштабировать текст, так как он был в пикселях. И как мы уже видели выше, очень легко не уследить за всевозможными наследованиями и получить неожиданные результаты.
Основная проблема rem для шрифтов в том, что данные единицы довольно сложно применить. Ниже я составил краткий список основных размеров шрифтов в rem единицах, при условии, что по умолчанию стоит 16px:
16px = 1rem (base)
Как видно, данные значение неудобны при вычислениях. По этой причине Snook использовали трюк под названием «62,5%». Это старый трюк, его уже применяли с em единицами:
Так как rem связаны с корневым текстом, то вариант от Snook выглядит так:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Но стоит учесть и те браузеры, которые не поддерживают данные единицы измерения. Для них мы изменим наш код на такой:
С виду данное решение может показаться идеальным, однако есть разработчики, которые остерегают от бездумного использования данного подхода. Harry Roberts написал свою статью по поводу применения rem единиц. По его мнению, хоть правило 62,5% и облегчает вычисления, в итоге оно заставляет разработчиков переписывать абсолютно все размеры шрифтов на их сайте.
Третий способ подсказал Chris Coyier на сайте CSS-Tricks. Он использует все три типа единиц измерения. Корневой текст он оставляет в px, модули в rem, а элементы модулей в em. Данный подход облегчает манипулирование размерами основного текста. На основе корневого текста вычисляется размер модулей, а по размеру модулей вычисляется размер шрифта для текста в модулях. Louis Lazaris обсуждала этот последний способ в статье Мощь em единиц измерения в CSS. В примере ниже можно увидеть, как работает последний способ:
Как видно, панацеи не существует. Комбинация различных способов ограничивается только воображением разработчиков.
Rem и медиа запросы
Использование em или rem в медиа запросах сводится к понятию «оптимальная длинна строки», и как она влияет на пользователей. В 2014 году веб-сайт Smashing Magazine опубликовал статью с комплексным исследованием типографики под названием Размер имеет значение: оптимальная длинна строки и размер шрифта в адаптивном веб-дизайне. В статье много интересного, в том числе была вычислена оптимальная длина строки: от 45 до 75-85 символов (включая пробелы и знаки препинания). Идеальное значение строки – 65 символов.
При грубом округлении 1rem = 1 символ, можно манипулировать текстом в одной колонке для мобильных устройств:
Есть одна интересная деталь при использовании rem и em в медиа запросах: все они имеют одно значение 1rem = 1em = размер браузера по умолчанию. Объяснение можно найти в спецификации media query:
«Относительные единицы измерения в медиа запросах основаны на значении браузера по умолчанию. К примеру, в HTML em вычисляется по размеру шрифта font-size, который задан юзер агентом или настройками браузера, а не стилями страницы.»
Сперва создадим span, в нем будем писать ширину экрана: Document width: px.
Создадим два медиа запроса: один для rem, другой для em (Для простоты используем Sass):
Добавим чуть-чуть JQuery для отображения размера экрана, обновляем значение при изменении размера окна:
Сначала мы показали, что правило 62,5% не работает для шрифтов в медиа запросах. При изменении ширины окна браузера, мы видим, как первый медиа запрос перестает работать на 320px (20x16px), а второй начинает на 480px (30x16px). Размер шрифта не меняется, на объявленные нами в стилях при изменении размера окна. Единственный способ это изменить в настройках браузера.
По этой причине не имеет значения, используем мы em или rem в медиа запросах. В таких проектах, как Foundation v5 и Bootstrap v4 alpha в медиа запросах используются em единицы.
Использование rem для масштабирования документов
Третий способ применения rem единиц это создание масштабируемых документов. Используя rem единицы в значениях ширины, внешних и внутренних отступов, можно создать интерфейс, который будет увеличиваться и уменьшаться в зависимости от размера шрифта по умолчанию. Рассмотрим данный способ на паре примеров:
В первом пример мы изменяем размер шрифта по умолчанию с помощью медиа запросов. Как в предыдущей главе статьи. Основная цель добиться удобного размера на разных устройствах пользователя. Если padding и margin элемента выражены в rem, то весь элемент масштабируется под размер экрана устройства.
Еще один пример:
Во втором примере мы делаем то же самое но с помощью JS. В этом примере пользователю предоставлена возможность настройки размера интерфейса. Напишите метод для сбора данных о размерах экранов пользователей (хранить можно в БД, куки или на съемном носителе), и вы будете знать о предпочтениях ваших пользователей.
Заключение
Заканчиваем наш урок по rem в CSS. Нет нужды объяснять все преимущества данных единиц измерения: адаптивность, масштабируемость, удобство при чтении и большая гибкость. Однако rem не панацея. При правильном применении они могут решить множество проблем, которые раздражали разработчиков много лет. Каждый из нас может создать свой подход. Открывайте текстовые редакторы, экспериментируйте и делитесь результатами в комментариях.
Автор: Adrian Sandu
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
