CSS px ↔ rem Dönüştürücü
CSS birimleri px ve rem arasında dönüştürme yapın.
px (Piksel)
Ekranda bir pikseli temsil eden mutlak bir birim. Sabit bir boyuta sahiptir ve duyarlı tasarım için sınırlıdır.
rem (Kök EM)
Kök öğenin (html) yazı tipi boyutuna dayalı göreli bir birim. Erişilebilirlik ve duyarlı tasarım için faydalıdır.
Dönüşüm Formülü
Kullanım Önerileri
- • Yazı tipi boyutu: rem önerilir
- • Boşluk (kenar boşluğu, dolgu): rem önerilir
- • Kenarlık: px kullanılabilir
- • Medya sorguları: rem önerilir
Tam CSS Birim Kılavuzu
Web geliştirmede doğru CSS birimlerini seçmek, kullanıcı deneyimini ve erişilebilirliği büyük ölçüde etkiler. px ve rem arasındaki farkları ve bunları uygun durumlarda nasıl kullanacağınızı öğrenin.
📐 Özellikler
- • Ekran pikselleriyle 1:1 yazışmaya sahip mutlak birim
- • Tüm tarayıcılarda tutarlı boyut
- • Hassas düzen kontrolü mümkün
- • Kullanıcı ayarlarından etkilenmez
✅ Önerilen Kullanım Alanları
- • Kenarlık kalınlığı (1px, 2px)
- • Gölge ofseti
- • Simge boyutları (16px, 24px)
- • İnce boşluk ayarlamaları
⚠️ Uyarılar
- • Kullanıcı yazı tipi boyutu ayarlarını yok sayar
- • Erişilebilirlik sorunlarına neden olabilir
- • Duyarlı tasarım için sınırlı
📐 Özellikler
- • Kök öğenin (html) yazı tipi boyutuna göre
- • Kullanıcı ayarlarını yansıtır
- • Tutarlı oranları korur
- • Erişilebilirlik dostu
✅ Önerilen Kullanım Alanları
- • Yazı tipi boyutu ayarları
- • Boşluk (kenar boşluğu, dolgu)
- • Konteyner boyutları
- • Medya sorgusu kesme noktaları
💡 Avantajlar
- • Ölçeklendirirken oranları korur
- • Erişilebilirliği artırır
- • Kolay bakım
🎯 Birime Özgü Kullanım Stratejisi
Tipografi
Yazı tipi boyutları ve satır aralığı için rem kullanın rem
Düzen
Boşluk ve konteynerler için rem kullanın rem
Ayrıntılar
Kenarlıklar ve gölgeler için px kullanın px
📱 Duyarlı Tasarım İpuçları
Mobil öncelikli Yaklaşım
Temel yazı tipi boyutunu 16 piksele ayarlayın ve rem birimleriyle ölçeklendirin
html { font-size: 16px; }
h1 { font-size: 2rem; /* 32px */ }Medya Sorgusu Kullanımı
rem tabanlı kesme noktalarıyla tutarlılığı koruyun
@media (min-width: 48rem) { /* 768px */ }
html { font-size: 18px; }
}♿ Erişilebilirlik Hususları
✅ Önerilen Uygulamalar
- • Yazı tipi boyutlarını rem birimleriyle ayarlayın
- • Minimum yazı tipi boyutunu 16 pikselde koruyun
- • Yeterli satır aralığı (1,5 veya daha fazla)
- • Minimum dokunma hedefi 44 piksel
❌ Kaçınılması Gerekenler
- • Yazı tipi boyutları için sabit px değerleri kullanma
- • 12 pikselin altındaki küçük metin
- • Sabit konteyner genişlikleri
- • 1.0 veya daha az satır aralığı
🔧 Tarayıcı Desteği ve Uyumluluğu
px Birimi
Tüm tarayıcılarda mükemmel destek. IE6+ sürümünden itibaren kullanılabilir.
rem Birimi
IE9+ ve modern tarayıcılarda mükemmel destek. IE8 ve altı için geri dönüş gerekir.
IE8 desteği için: Önce px değerini bildirin, ardından geri dönüş olarak rem değeri ekleyin
font-size: 18px; /* IE8 fallback */
font-size: 1.125rem; /* Modern browsers */