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

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

В макете соответственно всё указано в пикселях, честно брать каждый размер элемента и делить на 16 ну очень не хочется, подскажите есть ли решение может в фигме получать размеры в rem, или может какой инструмент чтобы при верстке автоматически можно было конвертировать использую IDE php storm
Или как можно эту проблему решить?
  • Вопрос задан
  • 456 просмотров
Решения вопроса 1
neuotq
@neuotq
Прокрастинация
Есть плагин https://plugins.jetbrains.com/plugin/11187-px2rem , но лучше наверное styleint и для него плагин https://github.com/a-tokyo/stylelint-rem-over-px который и чекает на пиксели и автоисправляет.

А и забыл конечно вариант в целом забить и с помощью postCSS и плагина исправлять уже на продакшн коде.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
SkiperX
@SkiperX Куратор тега CSS
Автоматически это не сделать, потому что не для всех размеров нужны ремы, шрифты 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);
	}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы