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

Question

[Сергей Горячев]

Собственно, попробовал сегодня два плагина для галпа, но они у меня не взлетели.
Может кто-то использует уже такую связку, поделитесь таском.
Как бы верстать конечно удобней в PX, но хочется добиться лучшего отображения сайта.
Да и потребовалось недавно сделать версию для слабовидящих и сайт некрасиво развалился.
В html у меня как правило стоит 16px или 14px.

Answer 1

[Сергей delphinpro]

Ну вот базовая схема.

$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 заюзать, в составе компаса.

Можно другие библиотеки посмотреть. Вариантов масса.

Comments

[Сергей Горячев]

Ааа, то есть даже вот так)
Опять я перемудрил с поиском решения, искал какой-нибудь пакет для гальпа.
А тут оказывается родными средствами решить можно.

[Сергей delphinpro]

Сергей Горячев: Можно поискать плагин для postcss. в стилях писать в пикселях, а плагин пересчитает в ремы.
Но я постцсс не использую, не подскажу какой именно.

[Сергей Горячев]

Сергей: Так я тоже не использую %)

[alvvi]

Сергей Горячев: вот он

[Сергей Горячев]

Сергей: А если у меня 14 пикселей, менять в 2 местах, да? В рут-фонт-сайз и в хтмл?

[Сергей delphinpro]

Сергей Горячев: нет. в html {} - 16px - это дефолтный размер шрифта в большинстве браузеров (может быть во всех, не знаю). Формула использована, чтобы задать рутовый шрифт в процентах от дефолтного.
Т.е. для изменения величины rem нужно поменять только переменную $root-font-size. Но это обычно не используется.
Я делаю примерно так

html {
  font-size: ($root-font-size / 16px) * 100%;
  @media (max-width: 768px) {
    font-size: ($root-font-size / 16px) * 100% * 0.75; // Уменьшить rem на 25% в маленьких дисплеях 
  }
}

[Сергей delphinpro]

А сам $root-font-size используется в других местах, например в расчетах вертикального ритма.

[Алексей Николаев]

+1, сам такое использую. И никаких плагинов не нужно.

Answer 2

[zooks]

$browser-context: 16; // Default

@function rem($pixels, $context: $browser-context) {
  @return #{$pixels/$context}rem;
}

Comments

[Сергей Горячев]

Не совсем уловил тут)

[Сергей Горячев]

Что писать в значениях-то? Так же как в примере выше? rem(20px)?

[zooks]

font-size: rem(20)