Dönüştürücüler

PX/REM Dönüştürücü

PX, REM ve EM değerlerini tekli veya toplu biçimde dönüştürür; aynı akışta CSS kodu ve spacing scale de üretir.

PX/REM dönüştürücü, tasarım sistemlerinde kullanılan sabit ve göreceli CSS birimleri arasında hızlı dönüşüm yaparak responsive kararları destekler.

Tek bir değerin PX, REM ve EM karşılıklarını anında hesaplayın.

Tekli dönüşüm

Varsayılan tarayıcı yazı tipi boyutu genellikle 16px'tir. Tailwind CSS gibi framework'ler de 1rem = 16px kullanır.

16px
16px

Yazı Tipi Boyutu Önizleme

Girilen piksel değerinin görsel etkisini hızlıca kontrol edin.

Pijamalı hasta yağız şoföre çabucak güvendi

Hazır CSS çıktısı

Seçtiğiniz özellik için kullanıma hazır CSS satırları üretin.

CSS Kodu

.element { font-size: 1rem; /* 16px */ font-size: 1em; /* 16px */ }

Hızlı Referans Tablosu

Bir değere tıklayarak tekli dönüştürücüye aktarın.

48px

Aralık Ölçeği

Kök font boyutuna göre hazır aralık değişkenleri oluşturun.

Aralık Ölçeği

:root { --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 2rem; /* 32px */ --space-8: 2.5rem; /* 40px */ --space-9: 3rem; /* 48px */ --space-10: 4rem; /* 64px */ --space-11: 5rem; /* 80px */ --space-12: 6rem; /* 96px */ }

PX/REM Dönüştürücü içinde öne çıkan noktalar

  • PX, REM ve EM arasında çift yönlü dönüşüm
  • Toplu değer çevirme ve referans tablosu desteği
  • CSS property çıktısı ve spacing scale üretimi

PX/REM Dönüştürücü adım adım nasıl kullanılır?

  1. Temel font boyutunu belirleyin

    Projede kullandığınız root font-size değerini seçerek dönüşümün hangi ölçeğe göre yapılacağını netleştirin.

  2. Tekli ya da toplu değerleri girin

    Bir tane ölçü dönüştürebilir ya da tasarım sisteminizdeki birden fazla değeri virgül veya satır ile toplu ekleyebilirsiniz.

  3. Dönüşümü kod olarak kullanın

    Üretilen sonuçları doğrudan font-size, spacing veya component ölçülerinde kullanmak için CSS çıktısını kopyalayın.

PX/REM Dönüştürücü en çok hangi durumlarda öne çıkar?

  • Figma veya tasarım dokümanındaki px değerlerini responsive CSS ölçeğine taşıma
  • Mevcut projede sabit spacing değerlerini rem tabanlı sisteme çevirme
  • Yeni component ölçülerini hızlı referans tablosuyla tutarlı hale getirme

Neden rem tabanlı bir ölçek tercih edilir?

REM, kullanıcının tarayıcı varsayılan metin ayarına uyum sağlar; bu da erişilebilirlik ve ölçeklenebilir tasarım açısından px'e göre daha esnek bir temel sunar.

PX/REM Dönüştürücü ile ilgili sık sorulan sorular

1rem her zaman 16px midir?

Hayır. Varsayılan tarayıcı ayarı çoğu zaman 16px olsa da proje içinde root font-size değiştirilmiş olabilir.

EM ile REM arasındaki temel fark nedir?

REM kök elemente bağlıdır; EM ise bulunduğu ebeveyn ya da mevcut elementin font boyutuna göre hesaplanır ve iç içe yapılarda birikimli etki gösterebilir.

Toplu dönüştürme ne işe yarar?

Bir design token listesi ya da spacing seti üzerinde tek tek işlem yapmak yerine tüm ölçüleri aynı anda standardize etmenizi sağlar.

PX/REM Dönüştürücü sonrasında nereye bakılabilir?

Dönüştürücüler kategorisinde sıradaki adım için bakabileceğiniz ilgili araçlar ve sayfalar yer alır.

PX/REM/EM Dönüştürücü

Birim Farkları

  • PX (Piksel): Sabit bir birimdir. Kullanıcı tarayıcı ayarlarını değiştirse bile ölçeklenmez.
  • REM (Root EM): Kök elementin (html) yazı tipi boyutuna bağlı göreceli birimdir. Varsayılan: 1rem = 16px.
  • EM: Ebeveyn elementin yazı tipi boyutuna bağlı göreceli birimdir. İç içe elemanlarda birikimli olarak büyüyebilir.

Tekli ve Toplu Dönüşüm

Tekli mod: Bir değer girerek anında PX, REM ve EM karşılıklarını görün. Toplu mod: Virgül veya satır ile ayrılmış birden fazla değeri aynı anda dönüştürün. Tasarım sisteminizin tüm boyut değerlerini tek seferde çevirebilirsiniz.

Yazı Tipi Önizleme

Girdiğiniz piksel değerinde örnek bir metin render edilerek yazı tipinin gerçek boyutunu görsel olarak deneyimlemenizi sağlar.

CSS Kod Üretimi

Dönüştürülen değerler için hazır CSS kodu üretir. font-size, margin, padding, width, height, gap gibi CSS özelliklerinden birini seçerek kopyalamaya hazır kod elde edebilirsiniz.

Referans Tablosu

1px'ten seçtiğiniz aralığa kadar tüm değerlerin PX, REM ve EM karşılıklarını gösteren hızlı referans tablosu. 4'ün katı olan değerler (yaygın spacing scale) vurgulu olarak gösterilir. Herhangi bir değere tıklayarak dönüştürücüye aktarabilirsiniz.

Aralık Ölçeği (Spacing Scale)

Root font boyutuna göre tutarlı bir aralık ölçeği CSS değişkenleri üretir. --space-1: 0.25rem'den başlayarak projelerinizde kullanabileceğiniz hazır CSS custom properties çıktısı alabilirsiniz.

Neden REM Kullanmalısınız?

Erişilebilirlik açısından REM kullanmak daha iyidir. Kullanıcı tarayıcısının varsayılan yazı boyutunu değiştirdiğinde, REM ile tanımlanan tüm ölçüler buna orantılı olarak ölçeklenir ve tasarımınız kullanıcı tercihine saygı duyar.