Конвертер единиц CSS
Введите значение один раз и увидите его во всех единицах длины CSS — px, rem, em, pt, %, vw и vh — с выбранными вами корневым размером шрифта, размером шрифта родителя и вьюпортом. Копируйте любой результат одним касанием.
Частые преобразования
Переведено во все единицы
rem, em и % зависят от размера шрифта; vw и vh зависят от вьюпорта. У px и pt фиксированное соотношение (1pt = 1,3333px). Измените контекст выше, если ваши значения по умолчанию отличаются.
Справочник px → rem (корень = 16px)
| px | rem | pt |
|---|---|---|
| 8px | 0.5rem | 6pt |
| 10px | 0.625rem | 7.5pt |
| 12px | 0.75rem | 9pt |
| 14px | 0.875rem | 10.5pt |
| 16px | 1rem | 12pt |
| 18px | 1.125rem | 13.5pt |
| 20px | 1.25rem | 15pt |
| 24px | 1.5rem | 18pt |
| 32px | 2rem | 24pt |
| 48px | 3rem | 36pt |
При корневом размере шрифта 16px по умолчанию разделите пиксели на 16, чтобы получить rem, и умножьте на 0,75, чтобы получить пункты.
О конвертере единиц CSS
CSS предлагает несколько способов выразить длину, и правильный выбор — это разница между макетом, который изящно масштабируется, и тем, который ломается. Этот конвертер превращает одно значение сразу во все распространённые единицы CSS. px (пиксели) — абсолютная опорная единица: в CSS один пиксель определяется как 1/96 дюйма. rem отсчитывается от корневого размера шрифта документа (элемента <html>), который по умолчанию равен 16px, поэтому 1rem = 16px и 1,5rem = 24px; rem — современный стандарт задания размеров, ведь изменение одного корневого значения перемасштабирует всю страницу, что отлично для доступности. em отсчитывается от размера шрифта родителя текущего элемента, поэтому при вложении накапливается. pt (пункты) — единица печати, фиксированная как 1pt = 1/72 дюйма = 1,3333px, поэтому 12pt = 16px. % в контексте font-size равен размеру шрифта родителя, поэтому 100% совпадает с 1em. vw и vh равны 1% ширины и высоты вьюпорта — идеально для «резиновых» полноэкранных макетов. Задайте собственные корневой размер шрифта, размер шрифта родителя и размер вьюпорта в расширенной панели; разумные значения по умолчанию (16/16/1920×1080) сразу покрывают повседневный случай px↔rem.
Как преобразовывать единицы CSS
- 1 Введите значение и выберите единицу, в которой оно задано (например, 24 px или 1,5 rem).
- 2 Считайте эквивалентное значение во всех остальных единицах в сетке результатов и нажмите кнопку копирования на любой карточке, чтобы скопировать его в готовом для вставки виде (например, «1.5rem»).
- 3 Откройте расширенную панель, чтобы изменить корневой размер шрифта, размер шрифта родителя или размер вьюпорта, если ваш проект не использует значения по умолчанию 16px / 1920×1080.
Формулы преобразования
Каждое преобразование проходит через пиксели с использованием фиксированных соотношений CSS: rem = px ÷ корневой-размер-шрифта (по умолчанию 16) — поэтому px = rem × 16. em = px ÷ размер-шрифта-родителя (по умолчанию 16). pt = px × 0,75, потому что 1px = 1/96 дюйма, а 1pt = 1/72 дюйма, что даёт 1pt = 96/72 px = 1,3333px и 1px = 0,75pt. % = px ÷ размер-шрифта-родителя × 100 (процент от font-size, где 100% = размер шрифта родителя, идентично 1em). vw = px ÷ ширина-вьюпорта × 100, и vh = px ÷ высота-вьюпорта × 100. При значениях по умолчанию это означает 16px = 1rem = 1em = 100% = 12pt = 0,8333vw = 1,4815vh. Если база, например корневой размер шрифта, установлена в 0, соответствующая единица становится неопределённой и отображается как «—», а не как бесконечность.
Часто задаваемые вопросы
Сколько px в 1rem?
По умолчанию 1rem = 16px, потому что rem отсчитывается от корневого размера шрифта (<html>), а браузеры задают его равным 16px из коробки. Значит, 1,5rem = 24px, а 2rem = 32px. Если вы измените корневой размер шрифта — например, на 10px, чтобы упростить расчёты — то 1rem станет равен этому значению (16px превратятся в 1,6rem). Задайте свой корневой размер шрифта в расширенной панели, и конвертер пересчитает мгновенно.
Какова формула перевода px в rem?
rem = px ÷ корневой-размер-шрифта, а обратно px = rem × корневой-размер-шрифта. При корне 16px по умолчанию это означает деление значения в пикселях на 16 для получения rem: 24px ÷ 16 = 1,5rem, 10px ÷ 16 = 0,625rem. rem предпочтительнее px для размеров шрифта и отступов, потому что он учитывает настройку размера шрифта в браузере пользователя, что лучше для доступности.
Каков корневой размер шрифта по умолчанию?
Корневой размер шрифта по умолчанию во всех основных браузерах равен 16px и применяется к элементу <html>. Это основа для rem, поэтому 1rem = 16px, если вы (или таблица стилей) не переопределите его. Этот конвертер использует 16px по умолчанию как для корневого, так и для родительского размера шрифта; любой из них можно изменить в расширенной панели под ваш проект.
В чём разница между px и pt?
px (пиксель) — стандартная единица для экранов, определяемая в CSS как 1/96 дюйма. pt (пункт) — традиционная единица печати/типографики, равная 1/72 дюйма. Поэтому соотношение фиксировано: 1pt = 96/72 px ≈ 1,3333px, а 1px = 0,75pt. Значит, 12pt = 16px, поэтому печатный документ в 12pt и экранный заголовок в 16px выглядят одинакового размера. Используйте px (или rem) для веба и оставьте pt для таблиц стилей печати.
Связанные инструменты
Продолжайте работать с UnitConv. Преобразуйте цвета между HEX, RGB и HSL в конвертере цветов, создавайте CSS-градиенты, проверяйте коэффициенты контрастности WCAG, рассчитывайте соотношения сторон и изучайте единицы длины за пределами веба в основном конвертере единиц.