Конвертер единиц CSS — px, rem, em, pt, % онлайн
Введите любое значение CSS в px, rem, em, pt или % и мгновенно получите эквивалент во всех других единицах. Задайте пользовательский базовый размер шрифта (по умолчанию 16px) для точного конвертирования rem и em. Все расчёты обновляются в реальном времени без перезагрузки страницы.
Основа: 16px. Для rem/em 1 единица = 16px на корневом уровне.
Как это работает
Почему единицы CSS важны для адаптивного дизайна
CSS предоставляет две широкие категории единиц длины: абсолютные (px, pt, cm, mm) и относительные (rem, em, %, vw, vh). Абсолютные единицы имеют фиксированный физический размер независимо от контекста; относительные масштабируются относительно чего-либо другого: размера корневого шрифта, размера шрифта родительского элемента или размеров области просмотра. Выбор правильного типа единицы определяет, насколько гармонично ваш макет адаптируется к разным размерам экранов, пользовательским настройкам шрифта и уровням зума.
Пиксели (px) по-прежнему остаются наиболее распространённой единицей CSS из-за предсказуемости и точности, но они не учитывают настройку размера шрифта в браузере пользователя. Пользователь, увеличивший стандартный размер шрифта до 20px для повышения доступности, увидит, что текст на основе px не изменится, тогда как текст на основе rem масштабируется соответственно. Именно поэтому Критерий успеха 1.4.4 WCAG 2.1 (Изменение размера текста) проще всего выполнить, используя относительные единицы, такие как rem, для размеров шрифтов.
px vs rem vs em: когда использовать каждую
rem (root em) относится к размеру шрифта корневого элемента — по умолчанию 16px во всех браузерах. Поскольку rem привязан к одной фиксированной точке отсчёта (элемент <html>), он избегает эффекта составного масштабирования, которому подвержен em. Используйте rem для размеров шрифтов, отступов компонентов и любых значений, которые должны масштабироваться с учётом предпочтений пользователя по шрифту. Типичная формула: rem = px ÷ основа, например 24px ÷ 16 = 1,5rem.
em относится к размеру шрифта текущего элемента, который сам может быть задан в em, создавая составную цепочку. `font-size: 1.2em` у дочернего элемента внутри родителя с `font-size: 1.2em` даёт 1,44 от корневого размера (1,2 × 1,2). Это делает em полезным для отступов, которые должны масштабироваться с локальным размером шрифта (padding и margin внутри компонента), но сложным для предсказания при глобальной вёрстке. pt (пункты) в основном полезны при проектировании для печати: 1pt = 1/72 дюйма, 72pt = 1 дюйм ≈ 96px на экране.
Выбор базового размера шрифта и работа с дизайн-системами
Большинство браузеров по умолчанию устанавливают 16px для корневого размера шрифта, именно поэтому в стандартных настройках конвертера 1rem = 16px. Некоторые разработчики задают `html { font-size: 62.5%; }`, чтобы 1rem = 10px, упрощая вычисления в уме (24px = 2,4rem вместо 1,5rem). Эта техника спорна, так как требует сброса размеров шрифтов повсюду и может конфликтовать с настройками доступности.
Современные дизайн-системы (Material Design, Apple HIG, Tailwind CSS) используют модульную шкалу для отступов и типографики — как правило, кратную 4px или 8px. Работа в этих единицах и конвертация в rem обеспечивает последовательный визуальный ритм в разных контекстах. Стандартная шкала Tailwind, например, использует 4px = 1 единица, поэтому значение 4 (16px) равно 1rem. В сомнительных случаях оставляйте основу на 16px и используйте этот конвертер для получения точных значений rem без арифметики в уме.
Частые вопросы
›Как перевести px в rem?
Разделите значение в пикселях на корневой размер шрифта. При стандартной основе 16px: rem = px ÷ 16. Следовательно, 24px = 1,5rem, 32px = 2rem, 48px = 3rem. Если корневой размер шрифта 10px (от `html { font-size: 62.5%; }`), то rem = px ÷ 10.
›Какой размер шрифта используется в браузере по умолчанию?
Все основные браузеры по умолчанию используют 16px для корневого размера шрифта, если пользователь не изменил свои настройки. Это означает, что 1rem = 16px в стандартной конфигурации. Некоторые пользователи увеличивают это значение для доступности — ключевая причина использовать rem вместо px для текста.
›В чём разница между rem и em?
rem всегда относится к размеру шрифта корневого элемента (<html>), что делает его предсказуемым. em относится к размеру шрифта текущего элемента, который может меняться через наследование. Используйте rem для глобальных значений (размер шрифта тела, макет страницы) и em для значений, которые должны масштабироваться с локальным контекстом (padding относительно собственного размера шрифта элемента).
›Сколько пикселей в 1rem?
По умолчанию 1rem = 16px. Если задать `html { font-size: 20px }`, то 1rem = 20px. Если задать `html { font-size: 62.5% }` (относительно стандарта 16px), то 1rem = 10px. Поле «Основа» в этом конвертере позволяет изменить предполагаемый корневой размер.
›Что лучше использовать для размеров шрифтов — rem или px?
По возможности используйте rem для размеров шрифтов. Текст на основе rem учитывает пользовательские настройки размера шрифта в браузере, что важно для доступности. Пиксели игнорируют настройки браузера, а значит пользователь, которому нужен более крупный текст, не получит пользы от масштабирования (до внедрения зума в браузерах).
›Как перевести px в pt?
1 пункт = 1/72 дюйма = 1,333 пикселя на экране. Для конвертации: pt = px × 0,75. Следовательно, 16px = 12pt. Пункты используются главным образом в CSS для печати и при работе с физическими носителями, такими как PDF или таблицы стилей для печати.
›Что означает % в единицах CSS?
Процент в CSS зависит от контекста. Для font-size: 100% = унаследованный размер шрифта (то же, что 1em). Для width/height: 100% = размер содержащего блока. В этом конвертере мы трактуем % как процент от базового размера шрифта: 100% = базовый px, 150% = 1,5 × базовый.
›Что такое трюк с 62.5%?
Задание `html { font-size: 62.5%; }` делает 1rem = 10px (так как 62,5% от стандартных 16px = 10px). Это упрощает вычисление rem: 24px становится 2,4rem вместо 1,5rem. Однако это требует сброса размеров шрифтов во всём CSS и может нарушить работу сторонних компонентов. Современные дизайн-токены и инструменты делают этот приём менее необходимым.
Похожие инструменты
Обновлено: