CSS Birim Dönüştürücü

CSS Birim Dönüşümü Nedir?

CSS birim dönüştürücü, uzunluk değerlerini farklı CSS ölçüm sistemleri arasında çeviren bir araçtır. CSS, ikiye ayrılan bir düzineden fazla uzunluk birimi tanımlar: px, pt, cm ve in gibi sabit fiziksel ölçümlere karşılık gelen mutlak birimler ve yazı tipi boyutu ya da görünüm alanı boyutları gibi bağlama göre değişen rem, em, vw, vh ve % gibi göreli birimler.

Tarayıcılar, oluşturma sırasında tüm CSS uzunluklarını piksel cinsinden hesaplar. 1.5rem yazdığınızda, tarayıcı 1.5'i kök yazı tipi boyutuyla (genellikle 16px) çarparak 24px elde eder. 50vw yazdığınızda ise mevcut görünüm alanı genişliğinin yarısını alır. Bu ilişkileri anlamak, farklı cihazlarda ölçeklenen ve tarayıcıda ayarlanan özel yazı tipi boyutları gibi kullanıcı tercihlerine saygı gösteren düzenler oluşturmak için gereklidir.

CSS Değerleri ve Birimler Modülü Seviye 4 spesifikasyonu (W3C), tüm mutlak birimler arasındaki tam dönüşüm oranlarını tanımlar: 1in = 96px = 72pt = 2,54cm = 25,4mm. Göreli birimlerin çalışma zamanı bağlamına bağlı olduğundan sabit bir oranı yoktur. Ücretsiz bir CSS birim dönüştürücü, herhangi bir kod yazmak zorunda kalmadan belirli kök yazı tipi boyutunuzu ve görünüm alanı boyutlarınızı kullanarak bu ilişkileri anında hesaplamanızı sağlar.

Neden CSS Birim Dönüştürücü Kullanmalısınız?

CSS birimlerini elle dönüştürmek, oranları ezberlemek, hesap makinesine başvurmak ve sonucu tekrar kontrol etmek demektir. Bu araç, dönüşümü tarayıcınızda hiçbir engel olmadan gerçekleştirir.

CSS Birim Dönüştürücü Kullanım Senaryoları

CSS Uzunluk Birimleri Referansı

CSS, yaygın olarak kullanılan 10 uzunluk birimi tanımlar. Mutlak birimlerin piksele sabit bir dönüşümü vardır. Göreli birimler bağlama göre değişir: rem için kök yazı tipi boyutu, em için üst öğe yazı tipi boyutu, vw ve vh için ise tarayıcı görünüm alanı.

Mutlak ve Göreli CSS Birimleri

Mutlak ve göreli birimler arasındaki tercih, düzeninizin farklı ekranlara ve kullanıcı ayarlarına nasıl tepki vereceğini etkiler. Her grubun belirgin avantajları ve dezavantajları vardır.

Yaygın px'ten rem'e Dönüşüm Tablosu

Bu tablo 16px kök yazı tipi boyutunu varsayar (tarayıcı varsayılanı). Projeniz farklı bir taban kullanıyorsa, piksel değerini tabanınıza bölerek rem karşılığını elde edin.

Kod Örnekleri

Bu örnekler, CSS birimlerini JavaScript, Python, CSS özel özellikleri ve Sass ile programatik olarak nasıl dönüştüreceğinizi gösterir.

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

Sıkça Sorulan Sorular