CSS Unit Converter

Co je převod CSS jednotek?

Převodník CSS jednotek je nástroj, který překládá hodnoty délek mezi různými CSS systémy měření. CSS definuje přes tucet délkových jednotek rozdělených do dvou skupin: absolutní jednotky jako px, pt, cm a in, které odpovídají pevným fyzickým mírám, a relativní jednotky jako rem, em, vw, vh a %, které závisí na kontextu, například na velikosti písma nebo rozměrech viewportu.

Prohlížeče při vykreslování převádějí všechny CSS délky na pixely. Když napíšete 1.5rem, prohlížeč vynásobí 1,5 kořenovou velikostí písma (obvykle 16px) a dostane 24px. Když napíšete 50vw, vezme polovinu aktuální šířky viewportu. Pochopení těchto vztahů je nezbytné pro tvorbu layoutů, které se přizpůsobují různým zařízením a respektují uživatelská nastavení, jako jsou vlastní velikosti písma nastavené v prohlížeči.

Specifikace CSS Values and Units Module Level 4 (W3C) definuje přesné převodní poměry mezi všemi absolutními jednotkami: 1in = 96px = 72pt = 2.54cm = 25.4mm. Relativní jednotky nemají pevný poměr, protože závisí na kontextu za běhu. Bezplatný převodník CSS jednotek vám umožní tyto vztahy okamžitě vypočítat pro vaši konkrétní kořenovou velikost písma a rozměry viewportu, bez psaní jakéhokoli kódu.

Proč použít převodník CSS jednotek?

Ruční převod mezi CSS jednotkami znamená pamatovat si poměry, vytáhnout kalkulačku a dvakrát kontrolovat výpočet. Tento nástroj provede převod ve vašem prohlížeči bez jakékoli námahy.

Případy použití převodníku CSS jednotek

Referenční tabulka CSS délkových jednotek

CSS definuje 10 běžně používaných délkových jednotek. Absolutní jednotky mají pevný převod na pixely. Relativní jednotky závisí na kontextu: kořenová velikost písma pro rem, nadřazená velikost písma pro em a viewport prohlížeče pro vw a vh.

Absolutní vs. relativní CSS jednotky

Volba mezi absolutními a relativními jednotkami ovlivňuje, jak se váš layout přizpůsobuje různým obrazovkám a uživatelským nastavením. Každá skupina má odlišné kompromisy.

Tabulka běžných převodů px na rem

Tato tabulka předpokládá kořenovou velikost písma 16px (výchozí nastavení prohlížeče). Pokud váš projekt používá jiný základ, vydělte pixelovou hodnotu vaším základem a získáte ekvivalent v rem.

Příklady kódu

Tyto příklady ukazují, jak programově převádět CSS jednotky v JavaScriptu, Pythonu, CSS vlastních vlastnostech a Sassu.

// 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
}

Nejčastější dotazy