Как перевести пиксели в REM?

Question

[Петр Питерский]

Здравствуйте, ситуация следующая есть макет в фигме под 1920, основной кегль шрифта 16 пикселей.
Соответственно верстаем в REM, который соответственно меняется от media query.

В макете соответственно всё указано в пикселях, честно брать каждый размер элемента и делить на 16 ну очень не хочется, подскажите есть ли решение может в фигме получать размеры в rem, или может какой инструмент чтобы при верстке автоматически можно было конвертировать использую IDE php storm
Или как можно эту проблему решить?

Comments

[Максим]

https://kalk.top/conver/px-rem

[Виталий Першин]

Если нужно быстро посчитать в ручную, я себе сделал вот такую таблицу, жмем на нужную ячейку и результат копируется в буфер https://codepen.io/get-web/pen/WNzWmXG

Но вообще это автоматизируют через преп/пост процессоры

[Ankhena]

Резиновая верстка — как сделать так, чтобы на 1400...

Answer 1

[Александр Талалаев]

Есть плагин https://plugins.jetbrains.com/plugin/11187-px2rem , но лучше наверное styleint и для него плагин https://github.com/a-tokyo/stylelint-rem-over-px который и чекает на пиксели и автоисправляет.

А и забыл конечно вариант в целом забить и с помощью postCSS и плагина исправлять уже на продакшн коде.

Answer 2

[Алекс Глебов]

Автоматически это не сделать, потому что не для всех размеров нужны ремы, шрифты 16px (и менее) и в тел будут 16. 18px уже надо индивидуально смотреть. С шириной в px тоже все индивидуально, где-то уменьшается, где-то нет.
Удобно конвертировать через scss, и функцию, которая принимает px из макета и делит на 16

$baseFontSize: 16;
@function rem($pixels, $min: 12) {
	@if (unitless($pixels)) {
		$pixels: $pixels * 1px;
	}
	@if (unitless($min)) {
		$min: $min * 1px;
	}
	$context: 16px;

	@return #{"max("}#{$pixels / $context * 1rem}#{", "}#{$min}#{")"};
}

max нужен, чтобы шрифты не уходили в меньший, чем 12 размер

использование:

.b-form__title {
		font-size: rem(29px);
	}