Автоматически это не сделать, потому что не для всех размеров нужны ремы, шрифты 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);
}
