webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...

Px to Rem, как пользоваться?

Собственно, попробовал сегодня два плагина для галпа, но они у меня не взлетели.
Может кто-то использует уже такую связку, поделитесь таском.
Как бы верстать конечно удобней в PX, но хочется добиться лучшего отображения сайта.
Да и потребовалось недавно сделать версию для слабовидящих и сайт некрасиво развалился.
В html у меня как правило стоит 16px или 14px.
  • Вопрос задан
  • 4144 просмотра
Решения вопроса 2
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Ну вот базовая схема.
$root-font-size: 16px;

@function rem($size) {
  @return $size / $root-font-size * 1rem;
}

html {
  font-size: ($root-font-size / 16px) * 100%;
}

.some-block {
  font-size: rem(24px);
}


Функцию можно заменить на миксин, как удобнее. С миксином проще пиксельный фоллбэк сделать (актуально только IE8).

Можно миксины из vertical-rhytm заюзать, в составе компаса.

Можно другие библиотеки посмотреть. Вариантов масса.
Ответ написан
zooks
@zooks
Frontend и Django
$browser-context: 16; // Default

@function rem($pixels, $context: $browser-context) {
  @return #{$pixels/$context}rem;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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