@ZaxapKramer
Больной верстальщик

Почему rem'ы работают так при размере шрифта в html в процентах (в Chrome)?

Здравствуйте. Вот смотрите, есть у нас такая горстка стилей, допустим:
html {
  font-size: 62.5%; /* (100% * 10px / 16px = 62.5 | 1rem = 10px) */
}

body {
  font-size: 1.6rem; /* 16px */
  margin:    1.6rem; /* 16px */
}


Тогда почему нельзя использовать rem'ы аналогично пикселям (1rem = 1px)? Можно:
html {
  font-size: 1px;
}

body {
  font-size: 16rem; /* 16px */
  margin:    16rem; /* 16px */
}


Давайте зададим размер шрифта в html в процентах, но немного иначе, все должно работать также, как и в предыдущем случае:
html {
  font-size: 6.25%; /* (100% * 1px / 16px = 6.25 | 1rem = 1px) */
}

body {
  font-size: 16rem; /* 16px */
  margin:    16rem; /* 96px - WAT!? */
}

Должно... но почему это не так? В чем причина такой странной работы rem, как единиц измерения?
1rem = 1px, но только для размеров шрифта, для margin же 1rem = 6px... В чем причина такого парадокса?

P.S. Все приравнивания rem к px крайне приблизительны. Не нужно указывать на эти утверждения, как на ошибку.

P.P.S. Данная проблема только в Chrome, в Firefox все работает, как надо...

Проблема решена! Ответил в комментариях.
  • Вопрос задан
  • 780 просмотров
Решения вопроса 2
@ZaxapKramer Автор вопроса
Больной верстальщик
Ранние попытки решить проблему.
Как уже заметили (спасибо большое за это) данная проблема замечена только в Chrome.
Придумал задать стили вот так, работает, как ни странно:
html {
  font-size: calc(6.25% + 1px - 1px) /* (100% * 1px / 16px = 6.25 | 1rem = 1px) */
  /* 6.25% + 1px - 1px = 6.25%, логично, забавно */
}

body {
  font-size: 16rem; /* 16px */
  margin:    16rem; /* 16px */
}


Либо так - тоже работает:
html {
  font-size: calc(6.25% + 0px) /* (100% * 1px / 16px = 6.25 | 1rem = 1px) */
  /* 6.25% + 0px = 6.25%, все также логично, только еще проще и "страннее" */
}


P.S. В IE оно каким-то боком крашится: font-size: 0.3px. Даже font-size: calc(6.25%), который везде равен 6.25% (в хром, конечно же, не меньше 6px), равен там 0.3px.

P.P.S. Данный хак можно применить только для Chrome (webkit) одним из таких способов:
browserhacks.com/#ch


Окончательное решение было найдено совершенно случайно. От части, на просторах интернета, от части, из проб и ошибок при попытках решить проблему.
/* Использование em вместо % */
html {
  font-size: 6.25%; /* (font-size: .0625em) на всякий случай */
  font-size: calc(1em * .0625)
}

Почему не .0625em? Это объясняется багом в IE, в котором единицы высчитываются неверно.
В добавок, таким образом исправляется баг (фича) в webkit-браузерах, описанный подробнее в ответе Ankhena W, за что ей спасибо.

Теперь мы можем использовать rem подобно px! Just use It!
Ответ написан
Комментировать
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Открыла консоль, посмотрела.
При
html {
  font-size: 6.25%; /* (100% * 1px / 16px = 6.25 | 1rem = 1px) */
}

в консоли написано font-size: 6px.
Поставила 4%, результат аналогичный.
Вывод: хотите меньше 6px, пишите в пикселях, а не в %%. Браузер стоит на страже читаемости букв :)

Соответственно, margin и получился 6px умножить на 16 = 96.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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