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

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

Собственно, попробовал сегодня два плагина для галпа, но они у меня не взлетели.
Может кто-то использует уже такую связку, поделитесь таском.
Как бы верстать конечно удобней в PX, но хочется добиться лучшего отображения сайта.
Да и потребовалось недавно сделать версию для слабовидящих и сайт некрасиво развалился.
В html у меня как правило стоит 16px или 14px.
  • Вопрос задан
  • 6198 просмотров
Комментировать
Подписаться 5 Оценить Комментировать
Решения вопроса 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 заюзать, в составе компаса.

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

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

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Автоматизировать работу ноумен с Инстаграмом
16 апр. 2024, в 19:33
1000 руб./за проект
Разработать расширение для конфигурации "1С:Управление торговлей 11.5"
16 апр. 2024, в 19:32
5000 руб./за проект
Разработать рекламные креативы/баннеры для РСЯ
16 апр. 2024, в 18:59
1000 руб./за проект
Ещё заказы