Как рассчитать REM для типа?

Как мне преобразовать PX в REM для моего типа? Я прочитал статью Джонатана Снука об использовании REM, но он использовал размер шрифта: 62,5%, который по умолчанию соответствует вашему размеру шрифта до 10 пикселей (для упрощения расчета). Как бы я преобразовал свои единицы PX в REM, если бы я использовал 100%, 75% и т.д.?

Ответ 1

Target Size / Base Size = Value

Поскольку мы можем предположить, что браузеры используют 16px по умолчанию (в конце концов, то, что сделал Джонатан Снук, предположил, что 62,5% - 10 пикселей), тогда ваша база равна 16. Если вы хотите 32px, тогда 32 / 16 = 2, захотите 40px, тогда 40 / 16 = 2.5, хотите 24, затем 24 / 16 = 1.5.

То же самое касается 75%... Определите, что такое 75% (12), и выполните тот же расчет. Если вы хотите 32px, то 32 / 12 = 2.666, хотите 40px, затем 40 / 12 = 3.333, хотите 24, затем 24 / 12 = 2.

Ответ 2

если вы просто добавите этот код в свой файл стиля

html {
  font-size: 62.5%;
}

конвертирует 1 rem = 10px. Теперь вы будете работать с базой 10px. Так

body {
  font-size: 1.6 rem;
}

у вас будет размер шрифта 1.6 * 10 = 16 пикселей.