İçeriğe atla
CrateX.app logosu

CrateX.app

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

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

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.

Piksel
px
Birimleri değiştirmek için dokunun

Uzunluk birimleri

Tipografi

Görünüm alanı

Yüzde

Kök yazı boyutuna göre
rem
Birimleri değiştirmek için dokunun

Uzunluk birimleri

Tipografi

Görünüm alanı

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

Hızlı başlangıç

1
Değer ve birim girin: örn. 16 + px veya 1 + rem.
2
Ö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.
3
Mobil: çekmecedeki sağ üst oktan Kaynak/Hedef arasında geçiş yapın.
4
Ayarlar rem/em/%/vw/vh için geçerlidir; mutlak birimler için devre dışıdır.
5
Sonuçları görüntüleyin: diğer birimler anında hesaplanır ve kopyalanabilir.
6
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ı.

Ek senaryo

em dönüştürücü, viewport birimleri ve CSS hesaplayıcı aynı akış içinde ele alınabilir; böylece sonucu kopyalamadan veya dışa aktarmadan önce daha hızlı kontrol edebilirsiniz.

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

4

Sonraki adım için bu ilgili araçlarla devam edin.