CSS Unit Converter

Apa itu Konversi Satuan CSS?

Konverter satuan CSS adalah alat yang mengubah nilai panjang antar sistem pengukuran CSS yang berbeda. CSS mendefinisikan lebih dari selusin satuan panjang, dibagi menjadi dua kelompok: satuan absolut seperti px, pt, cm, dan in yang dipetakan ke pengukuran fisik tetap, serta satuan relatif seperti rem, em, vw, vh, dan % yang bergantung pada konteks seperti ukuran font atau dimensi viewport.

Browser mengubah semua panjang CSS menjadi piksel saat rendering. Ketika Anda menulis 1.5rem, browser mengalikan 1.5 dengan ukuran font root (biasanya 16px) untuk mendapatkan 24px. Ketika Anda menulis 50vw, browser mengambil setengah dari lebar viewport saat ini. Memahami hubungan ini penting untuk membangun tata letak yang responsif di berbagai perangkat dan menghormati preferensi pengguna seperti ukuran font kustom yang diatur di browser.

Spesifikasi CSS Values and Units Module Level 4 (W3C) mendefinisikan rasio konversi tepat antar semua satuan absolut: 1in = 96px = 72pt = 2.54cm = 25.4mm. Satuan relatif tidak memiliki rasio tetap karena bergantung pada konteks saat runtime. Konverter satuan CSS gratis memungkinkan Anda menghitung hubungan ini secara instan berdasarkan ukuran font root dan dimensi viewport spesifik Anda, tanpa perlu menulis kode apapun.

Mengapa Menggunakan Konverter Satuan CSS?

Mengonversi antar satuan CSS secara manual berarti mengingat rasio, membuka kalkulator, dan memeriksa ulang perhitungan. Alat ini melakukan konversi di browser Anda tanpa hambatan apapun.

Kasus Penggunaan Konverter Satuan CSS

Referensi Satuan Panjang CSS

CSS mendefinisikan 10 satuan panjang yang umum digunakan. Satuan absolut memiliki konversi tetap ke piksel. Satuan relatif bergantung pada konteks: ukuran font root untuk rem, ukuran font parent untuk em, dan viewport browser untuk vw dan vh.

Satuan CSS Absolut vs Relatif

Memilih antara satuan absolut dan relatif memengaruhi bagaimana tata letak Anda merespons berbagai layar dan pengaturan pengguna. Setiap kelompok memiliki trade-off yang berbeda.

Tabel Konversi px ke rem yang Umum

Tabel ini mengasumsikan ukuran font root 16px (default browser). Jika proyek Anda menggunakan dasar yang berbeda, bagi nilai piksel dengan dasar Anda untuk mendapatkan ekuivalen rem.

Contoh Kode

Contoh-contoh berikut menunjukkan cara mengonversi satuan CSS secara programatik dalam JavaScript, Python, CSS custom properties, dan 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
}

Pertanyaan yang Sering Diajukan