CrateX.app

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

px, em, rem, %, vw, vh gibi CSS birimleri arasında dönüşümü destekler, duyarlı kesme noktası ayarları sağlar. Bağlama dayalı değerleri otomatik olarak hesaplar, duyarlı düzen geliştirme, ön uç uygulama ve stil uyarlaması için uygundur.

🚀 Hızlı başlangıç

Değer ve birim girin: örn. 16 + px veya 1 + rem.
Önce Kaynak birimi seçip bir değer girin, ardından Hedef birimi seçin; hızlıca geçiş için Değiştir’i kullanın.
Mobil: çekmecedeki sağ üst oktan Kaynak/Hedef arasında geçiş yapın.
Ayarlar rem/em/%/vw/vh için geçerlidir; mutlak birimler için devre dışıdır.
Sonuçları görüntüleyin: diğer birimler anında hesaplanır ve kopyalanabilir.
Kırılımlar: farklı ekranlar için dönüşümleri doğrulamak üzere mobil/tablet/masaüstü hazır ayarlarını değiştirin.

📌 Yaygın kullanım senaryoları

Kullanım alanları: duyarlı yerleşimler, tasarımdan geliştiriciye geçiş, farklı yoğunluk/baskı korelasyonu, birleşik stil kuralları.

🧭 Kullanım tavsiyeleri

Temel belirleyin: 16px kök yaygındır; rem ↔ px zihinden hesaplamayı kolaylaştırır.
Metin için rem tercih edin: küresel ölçekleme ve erişilebilirliği sağlar; bileşen içi ölçekleme için em kullanın.
Yerleşim için görünüm birimlerini kullanın: aşırı uçlardan kaçınmak için kırılımlar ve clamp() ile birleştirin.
Ondalıklar ve yuvarlama: okunması zor sayılardan kaçınmak için makul bir hassasiyet koruyun.

🎛️ Parametreler ve bağlam

REM temeli (Root Font Size): rem ↔ px dönüşümünü belirler. Web’de 16px yaygındır ve (1rem≈16px) zihinden hesaplamayı kolaylaştırır; tasarım 16px’e dayanmıyorsa bunu geçici olarak değiştirin.
EM temeli (Parent Font Size): em ve % (referans Yazı boyutu olduğunda) için kullanılır. Bileşen düzeyinde ölçekleme için ebeveyn yazı boyutunu değiştirin.
% referansı: Yazı boyutu / Genişlik / Yükseklik arasından seçim yapın. Yerleşim için Genişlik/Yükseklik; tipografi (örn. satır yüksekliği) için Yazı boyutu kullanın.
Kırılım hazır ayarları: Mobil / Tablet / Masaüstü / Geniş seçenekleri, genişlikler arasında hızlı tahmin için görünüm boyutunu da ayarlar. Bu sadece tasarım tahmini içindir, çalışma zamanı medya sorgusu değildir.
Görünüm boyutu: vw/vh/vmin/vmax ve % (referans genişlik/yükseklik olduğunda) için kullanılır. Gerçek cihazlar adres çubukları, güvenli alanlar ve kaydırma çubukları nedeniyle farklılık gösterebilir.
DPI (dots per inch): fiziksel birimler pt/pc/in/cm/mm/q ↔ px dönüşümü için. Varsayılan web varsayımı 96 DPI’dır; baskı/HiDPI için cihaz değerini ayarlayın, aksi halde bunu yaklaşık bir değer olarak düşünün.
İpuçları: 1) 16px ve 96 DPI yaygın temellerdir; 2) kırılımlar arasında geçiş yaparak yerleşim yüzdelerini doğrulayın; 3) bu kontroller tasarım aşaması için tahmin sağlar ve tarayıcının son DOM/CSS hesaplamasının yerini almaz.

⚠️ Sınırlamalar ve uyumluluk

% referansı özelliğe bağlıdır (genişlik/yükseklik/satır yüksekliği farklı davranır); bu araç yaygın durumları tahmini olarak hesaplar.
ex/ch, yazı tipi metriklerine bağlıdır; sonuçlar yazı tipi ve tarayıcıya göre değişir.
Görünüm birimleri, kaydırma çubukları/adres çubukları/güvenli alanlarla değişir; küçük sapmalar bekleyin.
Fiziksel birimler ↔ px, DPI ile değişir; baskı/HiDPI cihazları için doğrulama gerekir.

🔒 Gizlilik ve güvenlik

Tüm işlemler tarayıcınızda gerçekleşir; veriler cihazınızı terk etmez.

❓ Sıkça Sorulan Sorular

rem ile em arasındaki fark nedir?

rem kök yazı boyutuna göredir (öngörülebilir küresel ölçekleme); em ise ebeveyne göredir (bileşen içi ölçekleme için idealdir).

px mi, rem mi kullanmalıyım?

Yerleşim ve metin için rem’i tercih edin (erişilebilirlik); net ikonlar ve kenarlıklar için px uygundur.

Neden vw/vh cihazlar arasında farklı davranıyor?

Mobil adres çubukları/güvenli alanlar/kaydırma çubukları görünüm alanını etkiler; clamp()/min()/max() ve kırılımlarla birlikte kullanın.

Ekran piksellerini baskı birimlerine nasıl dönüştürürüm?

DPI’ı ayarlayın (örn. 96/72/300). Buradaki ekran→baskı yalnızca bir tahmindir; üretim için ICC iş akışlarıyla prova yapın.