Конвертер единиц CSS (px / rem / em / vh / vw)

Почему rem, а не px

Браузеры начинают с 16px, но люди со слабым зрением часто увеличивают размер шрифта по умолчанию в настройках браузера. Текст, заданный в rem, увеличивается вместе с этой настройкой, а текст в px — нет. Масштабирование страницы увеличивает оба варианта, но именно настройкой размера шрифта пользуются многие читатели, а критерий WCAG для изменения размера текста требует, чтобы текст масштабировался до 200% без потери содержимого или функциональности. Задавайте размер шрифта и интервалы вокруг него в rem, а px оставляйте для тонких линий и границ.

Столбец em и вложенность

Единица em зависит от размера шрифта самого элемента, а для самого font-size — от размера шрифта родителя. Значения em здесь рассчитаны для родителя с корневым размером, что верно только на верхнем уровне. Внутри элемента 0.875em значение 0.875em снова даст 12.25px, а не 14px, и уменьшение будет накапливаться. Поэтому rem — более безопасный вариант по умолчанию, а em подходит для отступов, которые должны масштабироваться вместе с текстом компонента.

Базовое значение 62.5% и единицы viewport

Значение html { font-size: 62.5% } делает 1rem равным 10px, что упрощает расчёты; укажите 10 в качестве базового размера. Это уменьшает всё остальное, заданное в rem, включая сторонние компоненты, поэтому снова задайте читаемый размер для body.

Значения vw и vh рассчитаны для viewport размером 1440 × 900. На телефонах 100vh может быть выше видимой области, пока отображается панель браузера; единицы 100svh и 100dvh учитывают это.

Как пользоваться

1. Введите значение в пикселях (px) и базовый размер корня (по умолчанию 16px).
2. Посмотрите рассчитанные значения rem, em, vw и vh.
3. Скопируйте готовые фрагменты CSS или воспользуйтесь таблицей масштабов.

Конфиденциальность и ограничения

Расчёты выполняются мгновенно в JavaScript на стороне клиента.