PX'ten REM'e Çevirici Nedir?
PX'ten REM'e çevirici, piksel (px) değerlerini, CSS'te kök elemanın yazı tipi boyutuna göre hesaplanan rem birimlerine dönüştüren bir araçtır. Bu dönüşüm; farklı ekran boyutlarına ve kullanıcı tercihlerine sorunsuzca uyum sağlayan, responsive ve erişilebilir web tasarımları oluşturmak için büyük önem taşır.
PX'ten REM'e Çevirici Ne Zaman Kullanılır?
Aşağıdaki durumlarda bir PX'ten REM'e çeviriciden yararlanabilirsiniz:
- Farklı cihazlarda orantılı şekilde ölçeklenmesi gereken responsive web siteleri geliştirirken
- Kullanıcının yazı tipi boyutu tercihlerine saygı gösteren erişilebilir tasarımlar yaparken
- Mevcut bir tasarımı, daha kolay yönetilebilir olması için mutlak birimlerden (piksel) göreli birimlere (rem) dönüştürürken
PX'ten REM'e Nasıl Hesaplanır?
Pikseli rem'e çevirmek için kullanılan formül şudur:
rem = px ÷ kök yazı tipi boyutu
Burada:
- rem, sonuçta elde edilen rem birimindeki değerdir
- px, dönüştürmek istediğiniz piksel değeridir
- kök yazı tipi boyutu, kök elemanın temel yazı tipi boyutudur (çoğu tarayıcıda genellikle 16px'tir)
Örnekler
Örnek 1: Bir başlık boyutunu pikselden rem'e çevirme
24px'lik bir başlık boyutunu, varsayılan 16px kök yazı tipi boyutuyla rem'e çevirelim.
| Girdi | Hesaplama | Sonuç |
|---|---|---|
| Piksel Değeri: 24px Kök Yazı Tipi Boyutu: 16px |
24 ÷ 16 | 1.5rem |
Örnek 2: Özel kök yazı tipi boyutuyla bir margin değerini çevirme
40px'lik bir margin değerini, özel olarak belirlenmiş 20px kök yazı tipi boyutuyla rem'e çevirelim.
| Girdi | Hesaplama | Sonuç |
|---|---|---|
| Piksel Değeri: 40px Kök Yazı Tipi Boyutu: 20px |
40 ÷ 20 | 2rem |
Örnek 3: Küçük bir padding değerini çevirme
8px'lik bir padding değerini, varsayılan 16px kök yazı tipi boyutuyla rem'e çevirelim.
| Girdi | Hesaplama | Sonuç |
|---|---|---|
| Piksel Değeri: 8px Kök Yazı Tipi Boyutu: 16px |
8 ÷ 16 | 0.5rem |
Sık Kullanılan Piksel - REM Dönüşümleri
Aşağıda, sık kullanılan piksel değerlerinin rem karşılıklarını içeren bir referans tablosu bulabilirsiniz (standart 16px kök yazı tipi boyutu temel alınmıştır):
| Piksel | REM |
|---|---|
| 4 px | 0,25 rem |
| 8 px | 0,5 rem |
| 12 px | 0,75 rem |
| 14 px | 0,88 rem |
| 15 px | 0,94 rem |
| 16 px | 1 rem |
| 18 px | 1,12 rem |
| 20 px | 1,25 rem |
| 24 px | 1,5 rem |
| 25 px | 1,56 rem |
| 32 px | 2 rem |
| 40 px | 2,5 rem |
| 48 px | 3 rem |
| 56 px | 3,5 rem |
| 64 px | 4 rem |
| 80 px | 5 rem |
| 300 px | 18,75 rem |
REM'in Piksele Göre Avantajları
CSS'inizde rem birimi kullanmanın birçok avantajı vardır:
- Rem birimleri kullanıcının tarayıcı yazı tipi ayarlarıyla birlikte ölçeklendiği için daha iyi erişilebilirlik sağlar
- Medya sorgularında yalnızca kök yazı tipi boyutunu değiştirerek kolayca responsive tasarım yapmanıza olanak tanır
- Tüm öğelerde daha tutarlı bir ölçekleme sunar
- Öğeler arasındaki orantısal ilişkiler sayesinde bakımı kolaylaştırır
İlgili Hesaplayıcılar
Şu ilgili hesaplayıcılar da işinize yarayabilir:
