CSS Birim Dönüştürücü
CSS birimlerini kök yazı tipi boyutu, ana yazı tipi boyutu, görünüm kapısı, DPI ve yüzde referans ayarlarıyla yerel olarak px, rem, em, %, vw, vh, vmin, vmax, pt, cm, mm, q, ex ve ch arasında bire bir dönüştürün.
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üDeğer girin ve Kaynak birimi seçinHedef birimi seçin veya tersine çevirmek için Değiştir’i kullanınGerektiğinde rem/em/%/vw/vh bağlamını ayarlayınDönüştürülen sonucu kopyalayınvw/vh kontrolü için viewport hazır ayarlarını değiştirin
Hızlı başlangıç
1
2
3
4
5
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.
Düzen tahminleri için görünüm birimlerini kullanın: aşırı uçlardan kaçınmak için kesme noktaları ve minimum/maksimum kısıtlamalarla 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 (inç başına nokta sayısı): fiziksel birimler için pt/pc/inç/cm/mm/q ↔ piksel. Varsayılan CSS tahmini 96 DPI'dır; özel değerler, tarayıcının son düzen hesaplaması değil, baskı/cihaz tahminleridir.
İpuçları: 1) 16 piksel ve 96 DPI ortak tabanlardır; 2) kesme noktalarını değiştirerek düzen yüzdelerini doğrulayın; 3) bu kontroller tasarım süresi tahminine yardımcı olur ve tarayıcının son DOM/CSS hesaplamasının yerini almaz.
Sınırlamalar ve uyumluluk
% referansı, blok içeren CSS özelliğine ve düzen moduna bağlıdır; bu araç, tahmin için canlı bir üst öğe/kapsayıcı ölçümü değil, seçilen yazı tipi boyutu/görüntü alanı genişliği/görüntü alanı yüksekliği referansını kullanır
ex/ch burada ana yazı tipi boyutuna dayalı yaklaşık değerlerdir; sonuçlar yazı tipi ölçümleri incelemesi değildir ve yazı tipleri/tarayıcılara göre değişiklik gösterir
Klasik vw/vh/vmin/vmax kaydırma çubuklarına/adres çubuklarına/güvenli alanlara göre değişir; bu araç dvh/svh/lvh, vi/vb, güvenli alan veya kapsayıcı sorgu birimlerini hesaplamaz
Fiziksel birimler ↔ piksel, yapılandırılmış DPI tahminini kullanır; baskı/HiDPI çalışması hâlâ cihaz veya kanıt doğrulaması gerektiriyor
Gizlilik ve güvenlik
İşlem tarayıcıda çalışır. Girdi değeri, From/To birimleri, birim başına önbelleğe alınan değerler, kök yazı tipi boyutu, üst öğe yazı tipi boyutu, viewport, DPI, yüzde referansı ve breakpoint seçimi geçerli tarayıcı oturumunda veya tarayıcı depolamasında kalabilir. Bir çalışma alanı kaydeder ya da WebDAV eşitlemesini etkinleştirirseniz bu değerler eşitleme ayarlarınıza göre kaydedilebilir. Dönüştürülen sonuçlar geçerli değer, birimler ve bağlam ayarlarından yeniden hesaplanır; ayrı sonuçlar olarak saklanmaz. Bu sayfa URL getirmez ve sunucu tarafı dönüştürme için değer göndermez. Paylaşılan cihazlarda gerektiğinde değerleri, ayarları ve site verilerini temizleyin.
Sıkça Sorulan Sorular
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).
Yerleşim ve metin için rem’i tercih edin (erişilebilirlik); net ikonlar ve kenarlıklar için px uygundur.
Mobil adres çubukları/güvenli alanlar/kaydırma çubukları görünümü etkiler; kesme noktaları ve min/maks kısıtlamalarla birleştirin
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.