Базовый размер шрифта нужен только для перевода em и rem — для остальных единиц (px, pt, in, cm, mm, pc) это поле не используется, так как они имеют фиксированный физический размер.
Результат
У этой страницы вообще нет серверной части. Вставленная таблица разбирается кодом JavaScript внутри вашего же браузера, график рисуется на элементе canvas на вашей машине, файл экспорта собирается локально. Ничего не загружается, не хранится и не пишется ни в какие логи. После загрузки страницы можно отключить сеть — всё продолжит работать, и это самый простой способ проверить обещание самостоятельно.
Факты и границы применимости
| Базовая единица | Пиксель CSS при 96 точках на дюйм — стандарт спецификации CSS |
|---|---|
| 1 пункт (pt) | 96/72 px ≈ 1,333333 px |
| 1 дюйм (in) | 96 px |
| 1 пика (pc) | 16 px (1/6 дюйма) |
| 1 em / 1 rem | Равны заданному базовому размеру шрифта (по умолчанию 16 px) |
Когда этот метод вводит в заблуждение
- Единицы px, pt, in, cm, mm и pc имеют фиксированный физический размер по спецификации CSS (96 px = 1 дюйм) и не зависят от настроек шрифта — они переводятся друг в друга однозначно.
- Единицы em и rem — относительные: 1 em равен размеру шрифта родительского элемента, 1 rem — размеру шрифта корневого элемента (html); в этом конвертере оба переводятся через одно и то же заданное вами значение «базовый размер шрифта», что упрощённо совпадает с типичным случаем, когда em используется на элементе с тем же размером шрифта, что и корень.
- На практике em, применённый к вложенным друг в друга элементам с разными размерами шрифта, может накапливать эффект (2em внутри элемента с font-size: 2em даёт визуально в 4 раза больше базового) — этот эффект каскадного наследования конвертер не моделирует, так как это простой линейный пересчёт единиц.
- Округление применяется только к отображаемому результату — внутренние вычисления выполняются с полной точностью чисел с плавающей точкой JavaScript.
Как это считается
Для единиц с фиксированным физическим размером (px, pt, in, cm, mm, pc) заранее заданы точные коэффициенты перевода в пиксели по стандарту CSS (96 px = 1 дюйм = 2,54 см).
Для em и rem коэффициент перевода в пиксели равен указанному вами базовому размеру шрифта (по умолчанию 16 px — типичное значение браузера по умолчанию).
Введённое значение умножается на коэффициент выбранной единицы «из» — получается величина в пикселях.
Величина в пикселях делится на коэффициент единицы «в» — получается результат в единице назначения, округлённый до выбранного числа знаков после запятой.
Вопросы и ответы
Почему нужно указывать базовый размер шрифта?
Потому что em и rem — относительные единицы: их физический размер в пикселях зависит от того, какой размер шрифта принят за «единицу». Для остальных единиц (px, pt, in и т. д.) это поле не влияет на результат.
Чем rem отличается от em на практике?
rem всегда отсчитывается от размера шрифта корневого элемента страницы (html), а em — от размера шрифта ближайшего родителя, из-за чего значения em могут накапливаться при вложенности; rem обычно предсказуемее в сложной вёрстке.
Какой базовый размер шрифта использовать по умолчанию?
16 px — стандартный размер шрифта по умолчанию в большинстве браузеров, если сайт явно не переопределяет его для элемента html.
Мои данные куда-то отправляются?
Нет, весь расчёт выполняется в вашем браузере.