REM PX Dönüştürücü Nedir?
REM PX dönüştürücü, göreli em (REM) birimlerini piksele (PX) çeviren pratik bir araçtır. Web geliştirmede REM, kök elemanın font boyutuna (genellikle <html> elemanı) bağlı göreli bir birimdir; PX ise mutlak (sabit) bir birimdir. Bu dönüştürücü, geliştiricilerin ölçeklenebilir ve erişilebilir tasarımlar oluştururken REM birimlerinin gerçekte kaç piksele denk geldiğini kolayca görmesini sağlar.
REM PX Dönüştürücü Ne Zaman Kullanılır?
Bu dönüştürücü özellikle şu durumlarda işinize yarar:
- Responsive (duyarlı) web siteleri tasarlarken göreli ve mutlak birimler arasında geçiş yapmanız gerektiğinde
- REM birimleri kullanan tasarım sistemleriyle çalışıp referans için piksel değerlerine ihtiyaç duyduğunuzda
- Ölçüleri piksel cinsinden veren mockup'lardan (taslaklardan) tasarımları hayata geçirirken, kodlamayı REM ile yapmayı tercih ettiğinizde
REM'den PX'e Nasıl Hesaplanır?
REM'den PX'e dönüşüm oldukça basit bir formüle dayanır:
PX = REM × Kök Font Boyutu
Burada:
- PX, elde edilen piksel değeridir
- REM, dönüştürülecek göreli em değeridir
- Kök Font Boyutu, html elemanının temel font boyutudur (çoğu tarayıcıda varsayılan olarak 16px'tir)
Yani REM değeri, kök font boyutuna göre belirlenir. Bu da şu anlama gelir: CSS'inizde <html> elemanına aşağıdaki gibi 16px font boyutu atadığınızda:
Bu durumda 1rem = 16px olur.
Örnekler
Temel REM'den PX'e Dönüşüm
Varsayılan 16px kök font boyutuyla 1.5rem değerini piksele çevirelim.
| REM Değeri | Kök Font Boyutu | Hesaplama | Sonuç |
|---|---|---|---|
| 1.5rem | 16px | 1.5 × 16 | 24px |
Birden Fazla REM Değerini Dönüştürme
16px kök font boyutuyla 0.75rem, 2rem ve 3.5rem değerlerini piksele çevirelim.
| REM Değeri | Kök Font Boyutu | Hesaplama | Sonuç |
|---|---|---|---|
| 0.75rem | 16px | 0.75 × 16 | 12px |
| 2rem | 16px | 2 × 16 | 32px |
| 3.5rem | 16px | 3.5 × 16 | 56px |
Özel Kök Font Boyutu
Özel bir kök font boyutu olan 20px ile 2.5rem değerini piksele çevirelim.
| REM Değeri | Kök Font Boyutu | Hesaplama | Sonuç |
|---|---|---|---|
| 2.5rem | 20px | 2.5 × 20 | 50px |
Yaygın REM - PX Dönüşüm Tablosu
Sık kullanılan REM değerlerinin piksel karşılıklarını (varsayılan 16px kök font boyutuna göre) içeren pratik bir referans tablosu:
| REM Değeri | Piksel Değeri |
|---|---|
| 0.25 rem | 4 px |
| 0.5 rem | 8 px |
| 0.75 rem | 12 px |
| 0.875 rem | 14 px |
| 1 rem | 16 px |
| 1.125 rem | 18 px |
| 1.25 rem | 20 px |
| 1.5 rem | 24 px |
| 1.875 rem | 30 px |
| 2 rem | 32 px |
| 2.25 rem | 36 px |
| 2.5 rem | 40 px |
| 3 rem | 48 px |
| 4 rem | 64 px |
| 5 rem | 80 px |
İlgili Hesaplayıcılar
Daha fazla web geliştirme ve tasarım aracını keşfetmek için aşağıdaki hesaplayıcılara da göz atabilirsiniz:
