CSS Unit Converter

Что такое конвертер CSS-единиц?

Конвертер CSS-единиц — это инструмент, который переводит значения длины между различными системами измерения CSS. CSS определяет более дюжины единиц длины, разделённых на две группы: абсолютные единицы — px, pt, cm, in — с фиксированными физическими размерами, и относительные единицы — rem, em, vw, vh и % — которые зависят от контекста: размера шрифта или размеров viewport.

При рендеринге браузеры приводят все CSS-длины к пикселям. Когда вы пишете 1.5rem, браузер умножает 1.5 на корневой размер шрифта (обычно 16px) и получает 24px. Когда вы пишете 50vw, берётся половина текущей ширины viewport. Понимание этих взаимосвязей необходимо для построения лейаутов, которые масштабируются на разных устройствах и учитывают пользовательские настройки, например нестандартный размер шрифта, заданный в браузере.

Спецификация CSS Values and Units Module Level 4 (W3C) определяет точные коэффициенты пересчёта между всеми абсолютными единицами: 1in = 96px = 72pt = 2.54cm = 25.4mm. У относительных единиц фиксированного коэффициента нет, поскольку они зависят от контекста выполнения. Бесплатный конвертер CSS-единиц позволяет мгновенно вычислить эти соотношения для конкретного корневого размера шрифта и размеров viewport без написания кода.

Зачем использовать этот конвертер CSS-единиц?

Ручной перевод между CSS-единицами требует запоминания коэффициентов, открытия калькулятора и проверки вычислений. Этот инструмент выполняет конвертацию прямо в браузере без лишних действий.

Сценарии использования конвертера CSS-единиц

Справочник по единицам длины CSS

CSS определяет 10 широко используемых единиц длины. Абсолютные единицы имеют фиксированное соотношение с пикселями. Относительные единицы зависят от контекста: корневой размер шрифта — для rem, размер шрифта родительского элемента — для em, размеры окна браузера — для vw и vh.

Абсолютные и относительные единицы CSS

Выбор между абсолютными и относительными единицами влияет на то, как лейаут адаптируется к разным экранам и пользовательским настройкам. Каждая группа имеет свои компромиссы.

Таблица перевода px в rem

Таблица рассчитана для корневого размера шрифта 16px (браузерное значение по умолчанию). Если в вашем проекте используется другая база, разделите значение в пикселях на эту базу, чтобы получить эквивалент в rem.

Примеры кода

Эти примеры показывают, как программно конвертировать CSS-единицы на JavaScript, Python, через CSS-кастомные свойства и Sass.

// px to rem (given root font-size of 16px)
const pxToRem = (px, base = 16) => px / base
pxToRem(24)  // → 1.5

// rem to px
const remToPx = (rem, base = 16) => rem * base
remToPx(1.5) // → 24

// px to vw (given viewport width of 1440px)
const pxToVw = (px, viewport = 1440) => (px / viewport) * 100
pxToVw(360)  // → 25

// Dynamic calculation using getComputedStyle
const rootFontSize = parseFloat(
  getComputedStyle(document.documentElement).fontSize
) // → 16 on most browsers

# CSS unit converter functions

def px_to_rem(px: float, base: float = 16) -> float:
    return px / base

def rem_to_px(rem: float, base: float = 16) -> float:
    return rem * base

def px_to_vw(px: float, viewport: float = 1440) -> float:
    return (px / viewport) * 100

def px_to_pt(px: float) -> float:
    return px * 72 / 96

print(px_to_rem(24))     # → 1.5
print(rem_to_px(2.5))    # → 40.0
print(px_to_vw(720))     # → 50.0
print(px_to_pt(16))      # → 12.0

/* Define a base scale using rem */
:root {
  --base: 16px;       /* root font-size */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem;  /* 8px */
  --space-4: 1rem;    /* 16px */
  --space-8: 2rem;    /* 32px */
}

/* Fluid typography: scales between 1rem (16px) and 2.5rem (40px) */
h1 {
  font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem);
}

/* Viewport-relative hero height */
.hero {
  height: calc(100vh - 4rem); /* full viewport minus 64px header */
}

/* Percentage-based grid */
.sidebar { width: 25%; }     /* 360px on 1440px screen */
.content { width: 75%; }     /* 1080px on 1440px screen */

// Reusable px-to-rem function in Sass
@use "sass:math";

$base-font-size: 16px !default;

@function rem($px) {
  @return math.div($px, $base-font-size) * 1rem;
}

// Usage
.card {
  padding: rem(24px);       // → 1.5rem
  margin-bottom: rem(32px); // → 2rem
  border-radius: rem(8px);  // → 0.5rem
  font-size: rem(14px);     // → 0.875rem
}

Часто задаваемые вопросы