CSS Unit Converter

Що таке конвертація одиниць CSS?

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

Браузери зводять усі довжини CSS до пікселів під час рендерингу. Коли ви пишете 1.5rem, браузер множить 1.5 на кореневий розмір шрифту (зазвичай 16px), щоб отримати 24px. Коли ви пишете 50vw, береться половина поточної ширини вікна перегляду. Розуміння цих залежностей необхідне для побудови макетів, що масштабуються на різних пристроях і враховують налаштування користувача, зокрема власний розмір шрифту, встановлений у браузері.

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

Навіщо використовувати CSS Unit Converter?

Конвертування одиниць CSS вручну означає запам'ятовування коефіцієнтів, відкриття калькулятора і перевірку результатів. Цей інструмент виконує конвертацію у вашому браузері без жодних зусиль.

Випадки використання CSS Unit Converter

Довідник одиниць довжини 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
}

Часті запитання