Единицы измерения: 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, который будет увеличивать или уменьшать шрифт.
Вроде бы, использовать можно, однако есть проблема.
Типы значений в CSS. Абсолютные, относительные и всякие другие
Разберёмся, какие бывают типы значений у CSS-свойств, и определим, чем отличаются абсолютные и относительные значения свойств (все эти em, rem, vh, vw), как задаются цвета, и зачем нужны CSS-директивы.
Эта статья — часть учебника из курса профессиональной вёрстке сайтов от HTML Academy.
Абсолютные значения
Самый простой тип значений — абсолютные. Например, значения в пикселях. Они могут задавать размеры элементов, размеры текста и так далее.
Абсолютные значения хороши тем, что это итоговые значения, понятные и легко представимые. Этот как расстояние в метрах. Если до магазина 100 метров, то это близко, а если 10 000 метров, то это далековато. Чего не скажешь про относительные значения.
Интерактивные тренажёры по теме:
Относительные значения
— В два раза дальше, чем в прошлый раз!
Такое значение сразу и не представишь: сначала нужно узнать, какое расстояние было в прошлый раз, потом перемножить на два, получить итоговое расстояние и только потом делать выводы.
Поэтому относительные значения — это более сложный тип. Эти значения, в отличие от абсолютных, не являются конечными или итоговыми, а зависят от других значений. Например, ширина элемента, заданная в процентах, зависит от ширины родительского элемента. Браузер вычисляет ширину такого элемента, умножая ширину родителя на значение в процентах, и получает абсолютное значение в пикселях. Надо сказать, что при отрисовке страницы все относительные значения в итоге превращаются в абсолютные, иначе страницу просто не отрисовать.
Проценты ведут себя достаточно сложно и вычисляются по-разному в зависимости от того, в каком свойстве используются. Например:
если задать ширину в процентах, она вычисляется от ширины родителя,
если задать размер шрифта в процентах, он вычисляется от размера шрифта родителя,
если задать вертикальный внутренний отступ в процентах, он вычисляется от ширины родителя (а не от его высоты).
Помимо процентов есть и другие относительные единицы измерения.
Единицы vh и vw задают зависимость от размеров вьюпорта (видимой области окна браузера). Единица vh зависит от высоты вьюпорта и часто применяется, когда нужно делать полноэкранные секции. Единица vw задаёт зависимость от ширины вьюпорта и применяется намного реже.
Работа с относительными значениями — это частая прикладная задача, которую используют все. Но стоит помнить, при неумелом использовании относительные единицы измерения усложняют код и делают его поддержку более дорогой.
Дополнительные материалы
Значения с ключевыми словами
Следующий тип значений — ключевые слова. Они несложные, их нужно просто постепенно запоминать.
Как задаются цвета
Ещё один особый тип значений — цвета, которые встречаются сразу в нескольких вариантах.
50 оттенков одного и того же цвета
В формате rgba в скобках появляется четвёртая часть, которая принимает значение от нуля до единицы и задаёт степень непрозрачности цвета. При нуле цвет полностью прозрачен (или непрозрачен на 0%), при единице цвет полностью непрозрачен.
Так как rgba — это цветовое значение, оно может быть задано любым свойствам, которые принимают цвет (цвет рамки, цвет фона, цвет текста и так далее). И этот цвет вы можете сделать полупрозрачным. Эр-Джи-Би-Эй — полупрозрачная рамка ещё никогда не делалась так просто!
Форматы hsl и hsla похожи на rgb и rgba и они привычны для дизайнеров-полиграфистов. И ещё цвета можно задавать с помощью ключевых слов.
Значения-функции
С помощью calc можно добиваться очень сложного поведения. Например, вычислять размер элемента, используя разные единицы измерения: «ширина 200px плюс 10em».
Функция attr используется намного реже.
Значения в виде произвольных строк
И последний на сегодня тип значений — произвольные строки. Обычно это названия шрифтов или значение свойства content.
Однако content — это свойство, которое работает только у псевдоэлементов. Псевдоэлементы чаще всего используются для создания декоративных эффектов, в которых текстовое содержание не нужно, поэтому для content задаётся пустая строка.
CSS-директивы
На этом сегодня всё. Подпишитесь на нас на Хабре, чтобы не пропустить другие полезные шпаргалки по веб-разработке. И помните, что промокод SKUCHNO даёт скидку 1000 ₽ на все профессиональные курсы HTML Academy. Один из них — курс по профессиональной вёрстке сайтов, который недавно сильно обновился.
EM, REM или PX – почему нельзя использовать «только пиксели»
Дата публикации: 2017-01-30
От автора: споры ведутся уже давно – какие единицы измерения использовать в CSS? Мы, как и многие другие, сначала перешли на REM и потом вернулись к любимым пикселям. Мы просто потеряли тот след, почему мы перешли на REM единицы. Проблема связана не только с размером шрифта, но и с доступностью.
пиксели – это каменный век, не используйте их;
используйте REM для размеров шрифтов и отступов;
используйте EM для медиа запросов.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Пиксели
За все эти годы мы привыкли к пикселям (px). Все знают, что такое пиксель (хотя размер пикселя не всегда одинаковый, но это тема другой статьи). Всем удобно работать с пикселями, их легко переводить. Дизайнеры работают в пикселях, очень удобно брать размеры прямо из Photoshop и переносить их в верстку.
Так что же не так с пикселями?
Доступность
Я большой сторонник доступности в интернете.
Если вы указываете все шрифты, элементы и отступы в пикселях, вы не уважаете конечного пользователя.
В большинстве браузеров пользователь может сменить размер шрифта по умолчанию (обычно это 16px). Если пользователь указал размер шрифта по умолчанию 20px, все шрифты должны увеличиться пропорционально.
Однако если на сайте четко прописан размер шрифта в пикселях, то заголовок размером 30px всегда будет 30px. От дизайнера/разработчика это может звучать круто, но вы не обычный пользователь. Хватит делать сайты для себя.
Если задать размер шрифта в пикселях, это не убьет всю доступность. Пользователь может изменять масштаб с помощью CTRL+/- (на OSX вместо CTRL клавиша CMD). Но можно ведь сделать все лучше.
Единицы измерения REM
Если вы хоть как-то знакомы с миром веб-дизайна, вы точно слышали про единицы измерения REM. Если все же не знаете, REM – это способ указать размер шрифта на основе размера шрифта корневого HTML элемента. С их помощью также можно быстро изменить размеры во всем проекте, поменяв размер шрифта корневого элемента (например, под определенный медиа запрос/размер экрана).
«REM единицы представляют собой размер шрифта корневого элемента (например, размер шрифта тега ). Если использовать эти единицы измерения для указания размера шрифта корневого элемента, вы получите изначальное значение.»
Как перевести REM в PX
Стандартный пример: размер шрифта html задан в 10px, параграф задан в 1,6rem. 1,6rem*10px = 16px.
Самый распространенный сценарий, который я видел, это установка корневого размера шрифта в 10px с помощью REM. Это позволяет легко и быстро переводить одни значения в другие, просто поделив на 10.
Тем не менее, если задать базовый размер шрифта в пикселях, мы получим ту же проблему, что и в примере выше. Доступность.
У REM единиц есть свои способы применения, однако я готов поспорить, что большинство людей используют REM только потому, что они круче пикселей. Я почти не видел реальных проектов, где специально бы изменяли корневой размер шрифта под определенный размер экрана, и это нормально. Если ваш сайт не нагружен множеством шрифтов, вы вряд ли захотите масштабировать все и сразу.
Так как же нам не ломать доступность?
Задайте размер шрифта корневого HTML элемента в процентах. Проценты будут связаны с размером шрифта в браузере по умолчанию. Обычно ставят размер шрифта на 62,5%. 62,5% от 16px (стандартный размер шрифта по умолчанию) составляют 10px. То есть 1,6rem = 16px. Если пользователь поменяет размер шрифта по умолчанию, например, на 20px, то 1,6rem будут равны 20px. Если пользователь хочет шрифты еще больше, пусть ставит. Счастливый дизайнер, счастливый разработчик. Со всеми числами легко работать.
Идеальный вариант – оставить размер шрифта HTML на 100%, но тогда вычисления станут немного сложнее. Например, 16px будут равны 1rem, а 20px станут 1,25rem, 24px превратятся в 1,5rem и т.д.
Sass/SCSS в помощь
Вычислять все эти числа в голове довольно затруднительно и долго. К счастью, вам не следует беспокоиться, если вы используете один из CSS препроцессоров Sass/SCSS, LESS. Все цифры можно вычислять с помощью функций.
А что по поводу EM единиц измерения?
EM единицы работают почти так же, как REM, пока дело не касается вложенности. Мне никогда не нравились EM, особенно когда нужно задавать размер шрифта. Например, возьмем div с размером шрифта 2em, добавим параграф со шрифтом 2em. Размер параграфа теперь 2em относительно div. Я быстро сбиваюсь в вычислениях, где какой размер. Код быстро становится неудобным. Именно эту проблему решает REM – размер всегда привязывается к корневому элементу.
Что по поводу медиа запросов?
Итак, мы установили, что значения в пикселях переписывают значения браузера по умолчанию, поэтому лучший выход – перевести все пиксели в REM, верно? Не совсем.
В этой статье описываются ключевые различия в использовании пикселей, EM и REM в медиа запросах (//zellwk.com/blog/media-query-units/). Прочитайте ее и возвращайтесь.
В итоге, и пиксели и REM в медиа запросах проигрывают, когда необходимо изменить масштаб в некоторых браузерах. EM в таких случаях становится наилучшим вариантом. REM здесь проигрывают намного больше, чем пиксели, поэтому мы не будем их рассматривать.
Все становится немного сложнее. У EM и пикселей есть свои минусы с медиа запросами, когда дело касается различий значений с плавающей точкой. Если вы используете min и max медиа запросы в одном блоке кода, то вам придется попотеть, когда пользователь начнет менять масштаб браузера или размер шрифта по умолчанию.
Пара примеров:
Мы используем шесть цифр после точки, так как отдельные браузеры не видят разницы межу 2-5 цифрами после точки.
Пример 1: масштаб в браузере установлен в 100%, ширина окна 640px
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Ремы, емы, и почему отказ от них — не проблема
Возможно, вы слышали, что при определении размера элементов на вашем сайте, вы должны использовать 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 являются в данном случае лучшим инструментом, перейдите на них.
Бонусный уровень: По теме единиц
Советы, что написаны ниже имеют мало общего с этой статьей, поэтому я перечислю их без реального объяснения того, что они здесь делают, и не предлагаю никакого финального текста. Это будет неудовлетворительно.
