Таблица соответствия PX и REM
Единица rem — это смесь px и em. rem задаёт размер относительно размера шрифта элемента <html>. 1 rem = 16px.
| 10px | 0.625rem |
| 11px | 0.6875rem |
| 12px | 0.75rem |
| 13px | 0.8125rem |
| 14px | 0.875rem |
| 15px | 0.9375rem |
| 16px | 1rem |
| 17px | 1.0625rem |
| 18px | 1.125rem |
| 19px | 1.1875rem |
| 20px | 1.25rem |
| 21px | 1.3125rem |
| 22px | 1.375rem |
| 23px | 1.4375rem |
| 24px | 1.5rem |
| 25px | 1.5625rem |
| 26px | 1. |
| 27px | 1.6875rem |
| 28px | 1.75rem |
| 29px | 1.8125rem |
| 30px | 1.875rem |
| 31px | 1.9375rem |
| 32px | 2rem |
| 33px | 2.0625rem |
| 34px | 2.125rem |
| 35px | 2.1875rem |
| 36px | 2.25rem |
| 37px | 2.3125rem |
| 38px | 2.375rem |
| 39px | 2.4375rem |
| 40px | |
| 41px | 2.5625rem |
| 42px | 2.625rem |
| 43px | 2.6875rem |
| 44px | 2.75rem |
| 45px | 2.8125rem |
| 46px | 2. 875rem |
| 47px | 2.9375rem |
| 48px | 3rem |
| 49px | 3.0625rem |
| 50px | 3.125rem |
| 51px | 3.1875rem |
| 52px | 3.25rem |
| 53px | 3.3125rem |
| 54px | 3.375rem |
| 55px | 3.4375rem |
| 56px | 3.5rem |
| 57px | 3.5625rem |
| 58px | 3.625rem |
| 59px | 3.6875rem |
| 60px | 3.75rem |
| 61px | 3.8125rem |
| 62px | 3.875rem |
| 63px | 3.9375rem |
| 64px | 4rem |
P.S. rem не поддерживается в IE8-.
Почему дизайнеры должны переходить с px на rem – и как это сделать в Figma
Проектирование с учетом доступности.
Если вы чем-то похожи на меня, то в течение последних лет с радостью использовали в Sketch и Figma пиксели (px), не задумываясь об этом. Мы привыкли к этой единице измерения. Это правильно, а если нет – команда разработчиков сможет это исправить, да? Кроме того, многие люди говорят, что мой дизайн должен быть идеальным до пикселя, верно?
Не совсем так (если только вы не истолковали «идеальный до пикселя», как избегание полупикселей). Приступим:
Так в чем же проблема использования значений в пикселях?
Пиксель – это абсолютная единица измерения, то есть 1 пиксель соответствует фиксированному физическому размеру (в зависимости от разрешения экрана). Теперь фиксированное значение кажется мечтой дизайнера. Оно означает полный контроль, поскольку мы проектируем 1x в Figma! Делаем так, чтобы все выглядело идеально! Однако использование px может создать серьезные препятствия для доступности (помимо других проблем).
Например, переопределение настроек размера шрифта, установленных пользователями.
Font-Size Preference? Что это?
Каждый браузер имеет размер шрифта корневого элемента по умолчанию. Это означает, что текст без стиля будет отображаться с определенным размером, обычно 16px.
Попробуйте в своем браузере!
Не только пользователи могут изменить это предпочтение. Разработчики также могут изменить размер шрифта корневого элемента
? Кстати: пользователи могут увеличить настройки масштабирования браузера вместо изменения размера шрифта корневого элемента.
Это не вызовет проблем с px. Соответственно все будет масштабироваться. Однако точно так же, как мы не знаем, какой размер экрана будут использовать пользователи, мы не в курсе предустановленных ими вариантов, к тому же существуют четкие правила добавления масштабирования шрифтов от WCAG.
PX перезапишет пользовательские настройки
Позвольте мне показать пример. Итак, вы определили все размеры шрифта в пикселях. Предположим, что ваш заголовок h2 – 48px, а текст p – 16px. Похоже на разумные читабельные значения.
Значения в пикселях будут препятствовать пользовательским настройкам размера шрифта в браузере
Однако, поскольку значения в пикселях фиксированные, они перезаписывают любые настройки браузера. Это, как если бы они урезали все до размера шрифта корневого элемента. Даже если пользователь изменит размер корневого элемента, в нашем примере с 16px на 24px, это не повлияет на отображаемый размер. Таким образом, вы создали барьер для юзабилити.
Что изменится, если я буду использовать REM единицы измерения?
rem – относительная единица, относящаяся к размерам шрифта корневого элемента (r в rem означает корень – англ. root). Таким образом, большую часть времени 1rem = 16px, однако, если размер шрифта корневого элемента был изменен (помните, что это могли сделать пользователи или разработчик), например, на 24px, тогда 1rem = 24px.
1rem = текущая настройка размера шрифта корневого элемента
Использование модулей rem учитывает пользовательские настройки браузера
Итак, чтобы преобразовать заголовок h2 из 48px в rem, мы делим 48px/16px (мы предполагаем, что размер корневого элемента по умолчанию) = 3rem. Если вам так проще,
REM не переводится в пиксели как таковые, но вы можете рассчитать значение пикселей на основе размера шрифта корневого элемента. Весь смысл его использования в том, что значение не является фиксированным.
Итак, чтобы ответить на наш первоначальный вопрос: «Что изменится в нашем дизайне при использовании rem вместо px». Ответ: для всех пользователей, не меняющих размер шрифта корневого элемента (а это, без сомнения, подавляющее большинство), абсолютно ничего не изменится
Прелесть в том, что, используя единицы rem для определения размера шрифта, вы как дизайнер сохраняете гармонию и иерархию шкалы шрифтов, но при этом предоставляете пользователям гибкость в адаптации размеров шрифта.
А что насчет EM?
И rem, и em относятся к размеру корневого элемента, но они не интерпретируют его одинаково во всем вашем дизайне.
rem
em → значение, кратное размеру шрифта элемента, в котором оно используется, например, размер шрифта контейнера 2rem = 32px, таким образом, 1em = 32px внутри контейнера
Использование em-единиц учитывает настройки браузера пользователя, но относится к элементу, в котором они используются
Таким образом, он по-прежнему соблюдает настройки браузера, но всегда относится к следующему более высокому элементу, в некоторых случаях это может быть корневой элемент, но он также, как в нашем примере, может быть контейнером с установленным размером шрифта.
See the Pen REM EM and PX by moonlearning (@moonlearning) on CodePen.
? Примечание: вы много прочитаете, что они относятся к родительскому элементу. Да, em может наследовать настройки от родительского элемента, но по определению оно: «Равно вычисленному значению свойства шрифта элемента, в котором оно используется». Есть отличная статья, объясняющая это более подробно.
Так что это довольно увлекательный и динамичный способ настройки таких вещей, как внутренние отступы и поля. И rem, и em имеют свои сильные и слабые стороны в зависимости от варианта использования. Опытные фронтенд-разработчики прекрасно их объединяют. Однако, работая с Figma, вы можете заметить, что, хотя расчет rem прост, вычисление em становится довольно запутанным.
Поэтому лично я, как дизайнер, придерживаюсь определения всех значений в rem и обязательно отмечаю, что команда разработчиков имеет полный контроль над конвертированием их в другие единицы, например, em, где это необходимо. О том, как и зачем я это делаю, я расскажу чуть позже.
Вкратце
Но в Figma нет REM-модулей?! Что мне делать?
Это то, о чем большинство веб-разработчиков не знают: ни в одной программе проектирования интерфейса даже в таких продвинутых, как Sketch и Figma, мы в настоящее время не можем проектировать в rem / em единицах.
Итак, UX / UI дизайнеры вынуждены проектировать в px, в мире, где доступность является юридическим требованием… Да, это странно, да, это печально, учитывая, насколько продвинута Figma в других областях, и да, я уверен, что это будет исправлено в ближайшее время (задача не из легких, если только не добавить в Figma режим проверки, как быстрое исправление).
И да, да, я знаю, что в идеальном мире все дизайнеры должны быть идеальными программистами, есть много статей об этом, но это не тема моей статьи. А пока давайте посмотрим, какие есть варианты у дизайнеров, использующих Figma, чтобы начать работать в относительных единицах.
Решение 1: Дизайн остается в PX и преобразуется в относительные единицы во время кодинга. И вся команда знает об этом!!!
Это хорошо работает, если вы работаете в тесной команде и четко распределяете обязанности. Разработчики должны знать о проблеме «в Figma только px» и переводить в CSS все пиксели в относительные единицы.
px в Figma, rem/em (или любые другие подходящие единицы) в CSS
На самом деле это неплохое решение, потому что, если вы работаете с хорошей технической командой, они будут гораздо более осведомлены о последних технологиях и требованиях доступности, которые, как уже упоминалось, представляют собой гораздо больше, чем просто относительные единицы.
Они также могут не возражать против получения значений в пикселях, поскольку есть несколько помощников, позволяющих избежать утомительных вычислений:
Метод 62,6%
При этом размер шрифта корневого элемента в CSS установлен на 62,5%. Таким образом, вы как бы подделываете размер корневого элемента в 10px, но продолжаете выдавать правильные значения. Нет, вы не трогаете реальный размер шрифта корневого элемента. Вы просто настраиваете его в своей разметке с помощью относительных измерений, и никто никогда ничего не узнает. Очень круто и хорошо объяснено в этой статье.
html {font-size: 62.5%;
/* 62.5% of the base size of 16px = 10px./
}
body {
font-size: 1.6rem;
/ reset 10*1.6 = 16px, to make sure you do not get any 10px around /
}
.someClass {
font-size: 2.4rem;
/ 10*2.4 = 24px */
}
Увійти у повноекранний режимВихід із повноекранного режимуSass Mixin
Сама Figma рекомендует этот Sass Mixin для простого преобразования px в rem.
Вы также найдете там немного магии метода 62,6%, если немного проскроллите вниз.
Источник: screenshot mixin
Решение 2. Используйте инструмент передачи проекта разработчикам (например, Zeplin)
Прелесть Figma в том, что вам больше не нужен другой инструмент для передачи проекта разработчикам. Однако, если вы используете для передачи такой инструмент, как Zeplin, он предоставляет фантастический способ просто переключить единицы измерения на rem. Мне нравится, что есть отдельная таблица стилей для блоков интервалов, которая автоматически отображается в rem.
Использование rem в Zeplin. Источник: сайт поддержки Zeplin
Все равно стоит указать команде, что исходные файлы Figma остаются в пикселях. Я немного расстроен, что не вижу такого конвертера rem в режиме проверки Figma, но, зная Figma, я уверен, что он вскоре появится.
Вы также можете использовать любой другой инструмент передачи проекта с этой опцией, например, Avocode, Anima и многие другие. Лично мне нравится Zeplin.
Решение 3. Определите значения PX и REM в таблицах стилей
Я предпочитаю именно это решение. В любом случае я добавляю эти значения в свои таблицы стилей, особенно когда работаю на фрилансе со сменяющимися разработчиками. UX в UX / UI дизайне исходит из юзабилити, поэтому я обязан убедиться, что проектирую для каждого пользователя.
Точно так же, как я использую «on color» в своей таблице стилей цветов, чтобы напоминать себе и всем остальным о необходимости проверять контрастность для доступности. Этот прием помогает напомнить всем, что конечный результат должен быть в относительных единицах.
Таблица стилей типографики
Поэтому, когда дело доходит до перехода от дизайна к разработке, я просто добавляю значения rem к значениям px в таблицу стилей типографики.
Важно иметь оба значения, поскольку дизайнерам, работающим с файлом, понадобятся пиксели.
Таблица стилей типографики. Источник moonlearing.io
Кстати, в Figma фактические единицы пикселей безразмерны, я предполагаю, что это нужно, чтобы не путать пиксели, используемые для дизайна, и пиксели разрешения экрана (в Figma мы проектируем так называемое 1x, где 1px = 1pt, но это тема для отдельной статьи, следите за обновлениями и подписывайтесь на автора).
Не забудьте также перевести высоту строки в относительные единицы! В этом случае вам не нужно использовать rem, вы можете просто использовать безразмерное число, например, 1.5. Оно рассчитает высоту строки из заданного размера шрифта. Поэтому размер шрифта 16px и высота строки 1.5 приведут к 16px * 1.5 = высота строки 24px.
Вычисления в Figma
Если вы не знаете, то вы можете рассчитать что угодно прямо на панели свойств. Таким образом, вы можете просто разделить заданный размер шрифта на 16px и записать новое значение в таблицу стилей.
Вам нужно снова умножить его на 16px, чтобы восстановить значение в пикселях. Для высоты строки, я просто использую %, так как для меня это намного проще, а затем перевожу их в таблице стилей, например, 150% в 1.5.
Используйте панель свойств как калькулятор
Используйте плагин Hand››over
Вы также можете использовать этот отличный плагин, который сделает всю работу за вас. В Figma просто выберите элемент, и он покажет вам значения в rem. Вы можете скачать его бесплатно в Figma Community. Оставьте размер корневого элемента 16px.
Плагин Hand >> over переведет для вас px в rem
Используйте онлайн-конвертер
Есть много конвертеров, например, nekoCalc. Вы также можете использовать определенное соотношение и попробовать что-то вроде этого. Подробнее об использовании шкал адаптивного типа читайте здесь.
Вычисление rem из предполагаемого базового размера 16px
Система интервалов и компоненты
Я использую систему интервалов 8pt для большинства своих проектов.
Это означает, что все кратно 8 (обязательно подпишитесь на автора, статья об этом вскоре появится). Теперь это прекрасно работает с предполагаемым размером корневого элемента по умолчанию 1rem = 16px. Как вы могли заметить, я также делаю размер шрифта и высоту строки кратными 8 (иногда нужно выбирать значение кратное 4), поэтому я редко получаю сумасшедшие rem десятичные дроби.
Система интервалов 8pt, выбранные блоки в px, rem и описательное именование
Итак, как только моя система настроена, я просто применяю ее к своим компонентам.
Компонент с измерениями
Я добавляю rem только для того, чтобы напоминать себе и всем остальным использовать относительные единицы. Тем не менее, я добавляю примечание, в котором ясно указывается, что последнее слово в выборе компонентов и модулей остается за командой разработчиков. Иногда em могут быть более разумным решением.
Имейте в виду, что когда дело доходит до интервала, em иногда может быть гораздо лучшим решением, чем rem.
Тестирование и вычисление em в Figma было бы кошмаром, поэтому лучше доверить настройку реальных компонентов экспертам. Тем не менее, буду рад услышать другие решения!
? Несколько слов об именах интервальных блоков
Существует множество различных подходов, и некоторые дизайн-системы уже имеют заданную систему и именование интервалов.
Идеальное соглашение об именах – описательное, легкое для запоминания и… вот здесь появляется сложность… масштабируемое.
При настройке интервала я использую три группы S, L и M, где S – это мелкие элементы, например, внутри компонента, M – расстояния внутри групп и L – для разделения секций (грубо говоря). Внутри этих групп я добавляю размеры (всегда кратные 8) по мере необходимости, например. S-200 = 16px = 1rem. Сейчас я не использую 1, 2, 3 по той причине, что в будущем могу добавить или убрать размеры. Я не использую 10, 20, 30, так как их путают с пикселями, поэтому, как и с цветовыми вариантами, я использую шаг в 100 единиц, что дает мне большую гибкость.
Однако, это не устоявшееся правило, а просто способ, который с течением времени мне показался наиболее удобным.
Не переживайте по поводу контура в 1px!
Это совершенно нормально! Нет проблем с наличием контура в 1px. Речь идет о том, чтобы сделать контент масштабируемым и пригодным к потреблению.
А как насчет точек останова?
Как UX / UI дизайнер, вы редко будете отвечать за выбор системы сеток (если только вы не используете настраиваемую CSS сетку, которая является моей любимой). Поэтому вам, скорее всего, будет предоставлен набор возможных точек останова для использования в вашем дизайне (всех или некоторых из них, зависит от вас).
Таблица стилей типографики с точками останова. Источник: moonlearing.io
Boostrap, например, сохраняет все точки останова в px, при этом определяя большинство других размеров в rem и em, «это потому, что ширина области просмотра в пикселях и не изменяется с размером шрифта».
Другие, такие как Zurb foundation, используют em (обратите внимание, что здесь, похоже, em побеждает rem). Я решил, что буду указывать, как и в других моих таблицах стилей, px, а также em (не rem).
Точка останова и единицы измерения – непростая задача (по крайней мере, для меня, как дизайнера), поскольку есть еще кое-что, что нужно учитывать, например, браузеры, которые вы используете… и множество мнений вокруг. Если вы захотите подробнее узнать об этой теме, вот отличная статья.
Хорошо, я понял, но на самом деле изменение размера шрифта корневого элемента требует больших усилий для такого небольшого количества людей!
Верно (хотя это не займет так много времени, как только вы осознаете это). Так почему же UX / UI дизайнер должен беспокоиться об относительных единицах? Потому что вы хороший человек и не станете парковаться на стоянке для инвалидов просто потому, что так удобнее (по крайней мере, я надеюсь, что вы не станете). Если вам нужна другая причина, по закону вы обязаны сделать свой веб-сайт доступным, и одна небольшая часть этого требования (среди многих других, объясненных WCAG) позволяет пользователям масштабировать текст.
В разделе 1.4.4 WCAG заявляет «1.4.4 Изменение размера текста: …размер текста можно изменять без вспомогательных технологий до 200 процентов без потери содержимого или функциональности. (Уровень AA)»
Итак, в двух словах: создание «идеального до пикселя дизайна» стало просто преступлением… и мне это никогда не нравилось.
Спасибо за прочтение!
Перевод статьи uxdesign.cc
PX to REM converter (instantly and bidirectional)
PX ↔︎ REM conversion tables
| Pixels | REM |
|---|---|
| 1 px | 0.06 rem |
| 2 px | 0.13 rem |
| 3 px | 0.19 rem |
| 4 px | 0.3 rem |
| 5 px | 0. 3 rem |
| 6 px | 0.4 rem |
| 8 px | 0.5 rem |
| 10 px | 0.6 rem |
| 12 px | 0.8 rem |
| 14 px | 0.9 rem |
| 15 px | 0.9 rem |
| 16 px | 1 rem |
| 18 px | 1.1 rem |
| 20 px | 1.3 rem |
| 24 px | 1.5 rem |
| 25 px | 1.6 rem |
| 28 px | 1.8 rem |
| 32 px | 2 rem |
| 36 px | 2 rem |
| 40 px | 3 rem |
| 44 px | 3 rem |
| 48 px | 3 rem |
| 50 px | 3 rem |
| 56 px | 4 rem |
| 64 px | 4 rem |
| 72 px | 5 rem |
| 75 px | 5 rem |
| 80 px | 5 rem |
| 90 px | 6 rem |
| 100 px | 6 rem |
| REM | Pixels |
|---|---|
0. 01 rem | 0.16 px |
| 0.03 rem | 0.5 px |
| 0.05 rem | 0.8 px |
| 0.08 rem | 1.3 px |
| 0.1 rem | 1.6 px |
| 0.15 rem | 2 px |
| 0.2 rem | 3 px |
| 0.5 rem | 8 px |
| 1 rem | 16 px |
| 2 rem | 32 px |
| 3 rem | 48 px |
| 4 rem | 64 px |
| 5 rem | 80 px |
| 6 rem | 96 px |
| 8 rem | 128 px |
| 10 rem | 160 px |
| 15 rem | 240 px |
| 20 rem | 320 px |
| 30 rem | 480 px |
| 40 rem | 640 px |
| 50 rem | 800 px |
| 60 rem | 960 px |
| 80 rem | 1280 px |
| 100 rem | 1600 px |
Преобразование пикселей в REM
Этот калькулятор преобразует пиксели в единицы CSS REM.
Преобразование основано на размере шрифта по умолчанию в 16 пикселей, но его можно изменить.
С помощью модуля CSS rem вы можете определить размер относительно размера шрифта корневого тега HTML.
Преобразование работает, конечно, в обоих направлениях, просто измените противоположное поле ввода.
Пример
Итак, если мы возьмем размер по умолчанию в качестве примера, то 1px представляет 0.0625rem и, в другом направлении, 1rem представляет 16px .
EM против REM: различия
Внутри одного документа длина единицы REM везде одинакова, просто она может различаться между документами.
EM с другой стороны может различаться между каждым элементом, потому что он относится к собственным элементам font-size (за исключением самого font-size , в нем EM относительно родителя).
REM — более новый модуль, старые браузеры его не поддерживают.
Конвертер REM в PX
Конвертер REM в PX — это бесплатный онлайн-инструмент, с помощью которого вы можете легко конвертировать rem (корень em) в px (пиксель). Имейте в виду, что 1rem равен корневому размеру шрифта , другими словами, размеру шрифта в элементе.
Как использовать конвертер REM в PX
- Шаг 1: Введите базовый ( корень ) размер шрифта.
- Шаг 2: Введите значение rem ( root em ), которое вы хотите преобразовать в пиксели ( px ).
- Шаг 3: Нажмите клавишу ввода или нажмите кнопку преобразования, чтобы получить эквивалент пикселей .
Видеоруководство: преобразование рем в 9 пикселей0003
com/embed/M-6H8lHCHDc» frameborder=»0″ allow=»accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture» allowfullscreen=»»> Таблица преобразования REM в PX
| ЭМ | ПК |
|---|---|
| 0,0625рем | 1 пиксель |
| 0,125 бэр | 2 пикселя |
| 0,25 бэр | 4px |
| 0,5 бэр | 8px |
| 1рем | 16 пикселей |
| 2рем | 32px |
| 4рем | 64px |
| 12,5 бэр | 200px |
| 15.625рем | 250px |
| 18.75em | 300px |
| 20рем | 320px |
| 25рем | 400px |
| 30рем | 480px |
| 35,5 бэр | 568px |
| 37,5 бэр | 600px |
| 48рем | 768px |
| 50рем | 800px |
| 64рем | 1024px |
| 75рем | 1200px |
Как конвертировать REM в PX
Итак, учитывая, что значение rem относительно размера корневого шрифта.