Rem px: Конвертер px в rem

Не только пользователи могут перезаписывать эту настройку. Разработчики также могут изменить размер корневого шрифта с помощью CSS, используя тег html .

👆Кстати: пользователи могут увеличивать настройки масштабирования в браузере вместо изменения размера корневого шрифта. Этот не вызовет проблем с px и отлично работает! Все будет соответствующим образом масштабироваться. Тем не менее, мы ничего не знаем о предустановленных настройках браузера пользователей, поэтому использование rem будет способствовать изменению масштаба и корневого размера шрифта и сделает всех счастливыми.

PX перезапишет пользовательские настройки

Позвольте мне показать вам пример. Итак, вы определили все размеры шрифта в px . Чтобы упростить это, скажем, ваш h2 равен 48px , а ваш текст копии p равен 16px . Звучит как разумные читаемые значения на экране. Единицы размером 90 561 пикс. будут препятствовать настройкам размера шрифта в браузере пользователей. Как будто они сократили общение до размера корневого шрифта. Даже если пользователь изменит размер корня, в нашем примере с 16px на 24px , это не повлияет на отображаемый размер. Итак, вы создали барьер юзабилити.

rem — это относительная единица, связанная с размерами корневого шрифта ( r в rem rem на самом деле означает корень). Таким образом, в большинстве случаев 1rem = 16px , однако, если корневой размер шрифта был изменен (помните, что это могут сделать пользователи или разработчик), например. до 24px , затем 1rem = 24px.

1rem = текущая настройка размера корневого шрифта

Таким образом, чтобы перевести наши h2 of 48px to rem мы вычисляем 48px/16px(мы предполагаем размер корня по умолчанию)= 3rem . Если вам будет проще, просто думайте об этом как % . 1 бэр — это 100%, а 3 бэр — это то же самое, что и 300%.

REM не преобразуется в пиксели как таковые, но вы можете рассчитать значение px на основе вашего основного размера шрифта. Это не является фиксированным значением, и весь смысл его использования.

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

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

Теперь rem и em относятся к размеру корня, но они не интерпретируют его одинаково во всем вашем проекте.

rem → кратное корневому размеру шрифта вашего браузера (r означает или корень), например. root-font size = 16px , затем 1rem=16px

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

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

👆Примечание: вы много читали, что em относится к родителю. Да, em может наследоваться от родителя, но по определению это: «Равно вычисляемому значению свойства font-size элемента, для которого он используется». Здесь есть отличная статья, объясняющая это более подробно.

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

Это то, о чем не знает большинство веб-разработчиков: ни в одном программном обеспечении пользовательского интерфейса , даже в таких удивительно продвинутых, как Sketch и Figma, мы в настоящее время не можем проектировать в единицах rem/em как UX/UI Designer .

Таким образом, дизайнеры UX/UI вынуждены проектировать в пикселях в мире, где доступность является требованием закона … Да, это странно, да, это грустно, учитывая, насколько продвинута Figma во всех других областях, и да, я я уверен, что это будет обновлено в ближайшее время (непростая задача, если только она не будет добавлена ​​в режим проверки Figma в качестве быстрого исправления). И да, да, я знаю, что все дизайнеры должны быть идеальными кодерами в идеальном мире, есть много статей об этом, если вы нажмете на строку поиска, но это не моя тема. А пока давайте посмотрим, какие у нас варианты как у дизайнеров, использующих Figma, чтобы начать общение в относительных единицах.

Теперь это хорошо работает, если вы тесно сотрудничаете в команде и у вас есть четкое распределение обязанностей. Разработчики должны знать о «проблеме Figma px только с » и переводить все px в относительные единицы в CSS.

Это на самом деле неплохое решение потому что если вы работаете с хорошей технической командой, они будут гораздо более в курсе последних технологии и требований доступности, которые, как уже упоминалось, гораздо больше, чем просто относительные единицы. Они также могут быть не против получить px значений, так как есть некоторые помощники, чтобы избежать утомительных вычислений :

Старая, но золотая: Трюк 62,6%

При этом размер корневого шрифта установлен на 62,5% в CSS . Таким образом, вы как бы подделываете размер корня 10 пикселей, но продолжаете выводить правильный rem. Нет, вы не трогаете реальный размер шрифта корня! Вы просто настраиваете его в своей разметке с относительными измерениями, и никто никогда не узнает. Очень круто и очень хорошо объяснено в этой статье.

 html { 
 размер шрифта: 62,5%; 
 /* 62,5% от базового размера 16px = 10px.*/ 
 }body { 
 font-size: 1.6rem; 
 /* сбросить 10*1,6 = 16 пикселей, чтобы убедиться, что вы не получите 10 пикселей вокруг */ 
 }.someClass { 
 font-size: 2.4rem; 
 /* 10*2.4 = 24px */ 
 } 

Sass Mixin

Сама Figma рекомендует этот Sass Mixin для простого преобразования из px в rem . Вы найдете немного волшебства 62,6% и здесь, если немного прокрутите.

Преимущество Figma в том, что вам больше не нужен еще один инструмент передачи. Тем не менее, , если вы используете Zeplin для передачи, это обеспечивает фантастический способ просто переключить единицы на rem . Мне нравится, что для блоков Spacing есть отдельная таблица стилей, которая автоматически отображается в rem.

. Тем не менее, внутри команды стоит указать, что исходные файлы Figma остаются в px . Я немного расстроен, что не вижу такой преобразователь rem в режиме проверки Figmas, но, зная Figma, я уверен, что это не займет много времени.

Вы также можете использовать любой другой инструмент передачи с этой опцией, например. Avocode, Anima и многие другие. Мне лично нравится Зеплин.

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

Точно так же, как я использую «в цвете» в моей таблице цветовых стилей , чтобы напомнить мне и всем остальным проверить контрастность для доступности. Этот прием помогает напомнить всем, что конечный результат должен быть в относительных единицах.

Итак, в моей таблице стилей типографики, важном документе, когда дело доходит до передачи от дизайна к разработке, я просто добавляю rem значений к моим значениям пикселей . Важно иметь оба, так как дизайнерам, работающим с файлом, потребуется px .

Кстати, в Figma фактические пикселей единиц безразмерны, я предполагаю, что это сделано для того, чтобы не путать пикселей , используемых для дизайна, и пикселей разрешения экрана ( в Figma мы проектируем в так называемом 1x где 1px=1pt (!!!!!!) , но это будет отдельная статья, следите за новостями и подписывайтесь).

Не забудьте также перевести высоту строки в относительные единицы! В этом случае вам не нужно использовать rem , вы можете просто использовать безразмерное число, например 1.5 . Он рассчитает высоту строки из заданного размера шрифта. Таким образом, 16px font-size и 1.5 line-height приведут к 16px*1.5=24px line-height.

Рассчитать в Figma

Если вы не знаете, вы можете рассчитать что-либо прямо в панели свойств. Таким образом, вы можете просто разделить данный размер шрифта на 16px и получите значение rem , чтобы записать его в таблицу стилей. Вам нужно снова умножить его на 16px , чтобы сбросить его до px . Line-height, я просто использую % , так как мне это намного проще, а затем перевожу, например. 150% от до 1.5 1.5 в моей таблице стилей.

Используйте подключаемый модуль Hand››over

Вы также можете использовать этот великолепный подключаемый модуль, который сделает всю работу за вас. В Figma просто выберите элемент, и он покажет вам все в рем . Вы можете получить его бесплатно через сообщество Figma. Сохраняйте размер корня 16px

Используйте онлайн-конвертер

Есть много таких программ, как nekoCalc. Вы также можете использовать определенное соотношение и попробовать что-то вроде этого. Подробнее об использовании масштабов адаптивного шрифта здесь.

Я использую систему интервалов 8pt для большинства своих проектов. То есть все кратно 8 (не забудьте подписаться, скоро будет статья об этом). Сейчас это прекрасно работает с предполагаемым корневым размером по умолчанию 1rem = 16px . Как вы могли заметить, я также делаю размер шрифта и высоту строки кратными 8 (иногда вам нужно 4 здесь), поэтому я редко в конечном итоге с сумасшедшими rem десятичных знаков.

Итак, как только я установил свою систему, я просто применяю ее к своим компонентам. Компонент

Я добавляю свой rem просто для напоминания использовать относительные единицы измерения для меня и всех остальных. Тем не менее, я добавляю примечание ясно дает понять, что последнее слово о том, как они будут настраивать компоненты и блоки, остается за командой разработчиков. Иногда em может быть более разумным решением .

Имейте в виду, когда дело доходит до интервалов, em иногда может быть гораздо лучшим решением, чем rem .

Тестирование и вычисление em в Figma было бы кошмаром, поэтому лучше предоставить экспертам настройку реальных компонентов. Однако рад услышать другие решения!

👆Кратко об именовании блоков интервалов

Существует множество различных подходов, и некоторые системы проектирования уже поставляются с установленной системой и именами для интервалов.

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

При настройке собственного интервала я использую три группы S, L и M, где S — это мелкие детали, например. внутри компонента, M расстояний внутри групп и L для разделения секций (грубо говоря). Внутри этих групп я добавляю размеры (всегда кратные 8) по мере необходимости, например. С-200 = 16px = 1рем . Сейчас я не использую 1, 2, 3 по той причине, что в будущем я могу добавить или убрать размеры . Я не использую 10, 20, 30, так как его путают с px , поэтому, как и в случае с цветовыми вариантами, я использую шаги 100, что дает мне большую гибкость . Это, однако, не высечено на камне, это просто способ, который я нашел наиболее удобным с течением времени.

Не парьтесь с контуром в 1 пиксель!

Совершенно нормально! Нет проблем с контуром в 1px здесь и там.

Как дизайнер UX/UI , вы редко будете нести ответственность за принятие решения о сетке (если только вы не используете пользовательскую сетку CSS, которая мне всегда нравилась). Поэтому вам, скорее всего, будет предоставлен набор возможных точек останова для использования (все или некоторые из них, на ваше усмотрение) для вашего проекта.

Boostrap, например, хранит все контрольные точки в пикселях, а большинство других размеров определяет в rem и em по причине того, что «это потому, что ширина области просмотра указана в пикселях и не меняется с размером шрифта». Другие, такие как фонд Zurb, используют em (обратите внимание, что em здесь, кажется, побеждает

Точка останова и единицы измерения — сложный вопрос (по крайней мере, для меня как дизайнера), так как есть еще много вещей, которые нужно учитывать, например, браузеры, которые вы используете… и много сильных мнений вокруг. Если вы тоже хотите спуститься в кроличью нору, вот отличная статья.

Верно. Так почему же вы все еще должны беспокоиться об относительных единицах как дизайнер UX/UI? Потому что вы хороший человек и не станете парковаться на парковке для инвалидов