Содержание

Таблица соответствия 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.
625rem
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
2.5rem
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.

Пользователи могут изменить размер шрифта корневого элемента в настройках браузера. Попробуйте сами ChromeMore Menu (три маленькие точки в верхнем правом углу) > Settings > Appearance > Custom fonts. Особенно это пригодится пользователям с нарушением зрения!

Попробуйте в своем браузере!

Не только пользователи могут изменить это предпочтение. Разработчики также могут изменить размер шрифта корневого элемента

с помощью CSS, используя тег html.

? Кстати: пользователи могут увеличить настройки масштабирования браузера вместо изменения размера шрифта корневого элемента. Это не вызовет проблем с 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. Если вам так проще,

просто представьте это в виде %. 1 rem – это 100%, а 3 rem – это 300%.

REM не переводится в пиксели как таковые, но вы можете рассчитать значение пикселей на основе размера шрифта корневого элемента. Весь смысл его использования в том, что значение не является фиксированным.

Итак, чтобы ответить на наш первоначальный вопрос: «Что изменится в нашем дизайне при использовании rem вместо px». Ответ: для всех пользователей, не меняющих размер шрифта корневого элемента (а это, без сомнения, подавляющее большинство), абсолютно ничего не изменится

, и ваш дизайн выглядит так же, как с px. Для меньшинства, которое полагается на изменение размера шрифта корневого элемента, весь текст (и в идеале все другие элементы, но об этом позже) будет масштабироваться пропорционально.

Прелесть в том, что, используя единицы rem для определения размера шрифта, вы как дизайнер сохраняете гармонию и иерархию шкалы шрифтов, но при этом предоставляете пользователям гибкость в адаптации размеров шрифта.

А что насчет EM?

И rem, и em относятся к размеру корневого элемента, но они не интерпретируют его одинаково во всем вашем дизайне.

rem

→ значение, кратное размеру шрифта корневого элемента вашего браузера, например, размер шрифта корневого элемента = 16px, тогда 1rem = 16px

em значение, кратное размеру шрифта элемента, в котором оно используется, например, размер шрифта контейнера 2rem = 32px, таким образом, 1em = 32px внутри контейнера

Использование em-единиц учитывает настройки браузера пользователя, но относится к элементу, в котором они используются

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

Хорошо, я признаю, что в первый раз это сбивает с толку. Я приготовил для вас заметку на codepen.

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

Таблица преобразования 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 относительно размера корневого шрифта.