CSS Unit Converter

Vad är CSS-enhetskonvertering?

En CSS-enhetskonverterare är ett verktyg som översätter längdvärden mellan olika CSS-måttsystem. CSS definierar över ett dussin längdenheter, uppdelade i två grupper: absoluta enheter som px, pt, cm och in som mappas till fasta fysiska mått, och relativa enheter som rem, em, vw, vh och % som beror på kontext som teckenstorlek eller visningsfönstrets dimensioner.

Webbläsare omvandlar alla CSS-längder till pixlar vid rendering. När du skriver 1.5rem multiplicerar webbläsaren 1.5 med rotelementets teckenstorlek (vanligtvis 16px) och får 24px. När du skriver 50vw tar den hälften av det aktuella visningsfönstrets bredd. Att förstå dessa samband är nödvändigt för att bygga layouter som skalas över enheter och respekterar användarpreferenser som anpassade teckenstorlekar inställda i webbläsaren.

Specifikationen CSS Values and Units Module Level 4 (W3C) definierar de exakta konverteringskvoterna mellan alla absoluta enheter: 1in = 96px = 72pt = 2.54cm = 25.4mm. Relativa enheter har ingen fast kvot eftersom de beror på körtidskontext. En gratis CSS-enhetskonverterare låter dig beräkna dessa samband omedelbart givet din specifika rotelements-teckenstorlek och visningsfönsterdimensioner, utan att skriva någon kod.

Varför använda en CSS-enhetskonverterare?

Att konvertera mellan CSS-enheter för hand innebär att komma ihåg kvoter, plocka fram en kalkylator och dubbelkontrollera beräkningarna. Det här verktyget gör konverteringen i din webbläsare utan friktion.

Användningsfall för CSS-enhetskonverterare

Referens för CSS-längdenheter

CSS definierar 10 vanligt använda längdenheter. Absoluta enheter har en fast konvertering till pixlar. Relativa enheter beror på kontext: rotelementets teckenstorlek för rem, förälderelementets teckenstorlek för em och webbläsarens visningsfönster för vw och vh.

Absoluta kontra relativa CSS-enheter

Valet mellan absoluta och relativa enheter påverkar hur din layout svarar på olika skärmar och användarinställningar. Varje grupp har distinkta avväganden.

Vanlig konverteringstabell px till rem

Denna tabell förutsätter en rotelements-teckenstorlek på 16px (webbläsarens standard). Om ditt projekt använder en annan bas, dividera pixelvärdet med din bas för att få rem-motsvarigheten.

Kodexempel

Dessa exempel visar hur man konverterar CSS-enheter programmatiskt i JavaScript, Python, CSS custom properties och 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
}

Vanliga frågor