PX REM Dönüştürücü: CSS Birimleri Rehberi

CSS'te px ve rem birimleri arasında seçim yapmak, front-end geliştiricilerin sık karşılaştığı bir karardır. Her birimin ne zaman kullanılacağını anlamak, daha erişilebilir ve bakımı kolay tasarımlar ortaya çıkarır.

PX ve REM Arasındaki Fark

px (piksel): Mutlak birim. 1px, kullanıcı ayarlarından bağımsız olarak her zaman 1 pikseldir.

rem (root em): Göreceli birim. 1rem, kök elemanının yazı tipi boyutuna eşittir (varsayılan: 16px).

Hızlı Dönüşüm Tablosu

PX	REM (16px taban)
10px	0.625rem
12px	0.75rem
14px	0.875rem
16px	1rem
18px	1.125rem
20px	1.25rem
24px	1.5rem
32px	2rem
48px	3rem

Dönüşüm Formülü

rem = px / taban-yazı-tipi-boyutu
px = rem × taban-yazı-tipi-boyutu

Varsayılan 16px tabanıyla:

24px = 24 / 16 = 1.5rem

2rem = 2 × 16 = 32px

Hangisini Ne Zaman Kullanmalı?

REM Kullanın:

Yazı tipi boyutları — tarayıcı erişilebilirlik ayarlarına saygı gösterir

Boşluklar ve düzen — kullanıcı ayarlarıyla orantılı ölçeklenir

PX Kullanın:

Kenarlıklar — 1px kenarlık her zaman 1px kalmalı

Kutu gölgeleri — hassas görsel efektler

İnce görsel detaylar — piksel düzeyinde kontrol gerektiğinde

Erişilebilirlik Açısından Önemi

Kullanıcılar tarayıcılarının varsayılan yazı tipi boyutunu değiştirdiğinde (görme güçlüğü çekenler için yaygın), rem tabanlı düzenler buna uyum sağlar.

Kendiniz Deneyin

Ücretsiz PX REM Dönüştürücü aracımızla px ve rem arasında anında dönüşüm yapın.