1. Ana sayfa
  3. Tasarım
  5. PX REM EM Dönüştürücü

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

Kök ve üst öğe yazı boyutlarınıza göre pikselleri rem ve em birimine (ve tersine) çevirin.

Tarayıcınızda çalışır Ücretsiz

Yaygın boyutlar

Neden rem ve em?

CSS'te sabit piksel değerleri yerine rem ve em birimleri kullanmak, kullanıcının tarayıcıda belirlediği yazı boyutu tercihine saygı gösterir ve duyarlı (responsive) tasarımı kolaylaştırır. Bu, erişilebilirlik açısından da önerilen bir uygulamadır.

Birimler

  • px: sabit piksel
  • rem: kök (html) öğesinin yazı boyutuna göre; genellikle 1rem = 16px
  • em: üst öğenin yazı boyutuna göre

Kolay dönüşüm

Kök ve üst öğe yazı boyutlarınızı girin; herhangi bir birime değer yazdığınızda diğerleri anında güncellenir. Yaygın boyutların (12px, 14px, 16px, 24px, 32px...) rem karşılıklarını gösteren tablo da hazır bir başvuru kaynağıdır. Örneğin 16px kökte 24px = 1,5rem'dir.

PX REM EM Dönüştürücü nasıl kullanılır?

  1. Kök yazı boyutunu girin (varsayılan 16px).
  2. Gerekiyorsa üst öğe yazı boyutunu belirleyin.
  3. Piksel, rem veya em değerini yazın.
  4. Diğer birimlerdeki karşılığını kopyalayın.

Neden bu aracı kullanmalısınız?

Tasarım dosyalarındaki piksel değerlerini erişilebilir CSS birimlerine hızla aktarmanızı sağlar.

Sıkça sorulan sorular

rem mi em mi kullanmalıyım?

Sayfa genelinde tutarlı boyutlar için rem; çevresindeki yazıyla birlikte ölçeklenmesi gereken değerler (ör. buton iç boşluğu) için em kullanın.

Kök yazı boyutunu 62.5% yapmak iyi bir fikir mi?

1rem = 10px hesabını kolaylaştırır; ancak tüm bileşenlerin yazı boyutunu yeniden tanımlamanız gerekir. Çoğu proje 16px varsayılanını korur.

Medya sorgularında hangi birim kullanılmalı?

Tarayıcı yakınlaştırmasında tutarlı davranış için medya sorgularında em kullanılması önerilir.

İlgili araçlar

Gizli

CSS clamp() Oluşturucu

Ekran genişliğine göre en küçük ve en büyük boyut arasında akışkan şekilde ölçeklenen CSS clamp() değeri oluşturun.

Aracı aç
Gizli

Altın Oran Hesaplayıcı

Bir uzunluğu altın orana (φ ≈ 1,618) göre bölün ve düzen ile tipografi için φ tabanlı ölçek oluşturun.

Aracı aç
Gizli

Dokunma Alanı Boyutu Kontrolü

Buton veya bağlantı boyutunu WCAG 2.2, Apple HIG ve Material Design dokunma alanı önerilerine göre kontrol edin.

Aracı aç
Gizli

WCAG Kontrast Kontrolü

Metin ve arka plan renklerinin kontrast oranını WCAG AA ve AAA'ya göre kontrol edin.

Aracı aç