Konwerter jednostek CSS

Czym jest konwersja jednostek CSS?

Konwerter jednostek CSS to narzędzie, które przelicza wartości długości między różnymi systemami pomiarowymi CSS. CSS definiuje ponad tuzin jednostek długości podzielonych na dwie grupy: jednostki bezwzględne, takie jak px, pt, cm i in, odpowiadające stałym wymiarom fizycznym, oraz jednostki względne, takie jak rem, em, vw, vh i %, których wartość zależy od kontekstu — rozmiaru czcionki lub wymiarów obszaru widoku.

Przeglądarki podczas renderowania przeliczają wszystkie długości CSS na piksele. Gdy napiszesz 1.5rem, przeglądarka mnoży 1.5 przez rozmiar czcionki głównej (zazwyczaj 16px), uzyskując 24px. Gdy napiszesz 50vw, bierze połowę bieżącej szerokości obszaru widoku. Zrozumienie tych zależności jest niezbędne do budowania układów skalujących się na różnych urządzeniach i respektujących preferencje użytkownika, takie jak własny rozmiar czcionki ustawiony w przeglądarce.

Specyfikacja CSS Values and Units Module Level 4 (W3C) definiuje dokładne współczynniki konwersji między jednostkami bezwzględnymi: 1in = 96px = 72pt = 2.54cm = 25.4mm. Jednostki względne nie mają stałego przelicznika, ponieważ zależą od kontekstu wykonania. Darmowy konwerter jednostek CSS pozwala błyskawicznie obliczać te zależności dla konkretnego rozmiaru czcionki głównej i wymiarów obszaru widoku, bez pisania jakiegokolwiek kodu.

Dlaczego warto używać konwertera jednostek CSS?

Ręczna konwersja jednostek CSS wymaga pamiętania przeliczników, sięgania po kalkulator i weryfikowania wyników. To narzędzie wykonuje konwersję w przeglądarce bez żadnego wysiłku.

Zastosowania konwertera jednostek CSS

Dokumentacja jednostek długości CSS

CSS definiuje 10 powszechnie używanych jednostek długości. Jednostki bezwzględne mają stały przelicznik na piksele. Jednostki względne zależą od kontekstu: rozmiar czcionki głównej dla rem, rozmiar czcionki rodzica dla em, a obszar widoku przeglądarki dla vw i vh.

Jednostki bezwzględne a względne w CSS

Wybór między jednostkami bezwzględnymi a względnymi wpływa na to, jak układ reaguje na różne ekrany i ustawienia użytkownika. Każda grupa ma inne zalety i ograniczenia.

Tabela konwersji px na rem

Tabela zakłada rozmiar czcionki głównej wynoszący 16px (domyślny w przeglądarce). Jeśli projekt używa innej bazy, podziel wartość pikselową przez tę bazę, aby uzyskać odpowiednik w rem.

Przykłady kodu

Poniższe przykłady pokazują, jak programowo konwertować jednostki CSS w JavaScript, Python, niestandardowych właściwościach CSS i 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
}

Często zadawane pytania