PX'ten REM'e Dönüştürücü

Ne yapar

Bu araç CSS uzunluklarını piksel ile göreli birimler rem ve em arasında dönüştürür. 24px gibi tek bir değer yazarak 1.5rem elde edin, birden çok değeri her satıra bir tane yazarak hepsini birden dönüştürün ya da bütün bir stil dosyasını yapıştırın; içindeki her px değeri yerinde yeniden yazılır. Başvuru tablosu, temel boyutunuzda 1px’ten 128px’e kadar yaygın boyutları gösterir. Hiçbir şey tarayıcınızdan çıkmaz.

Nasıl kullanılır

1. CSS yapıştırın ya da her satıra bir değer yazın. Birimsiz sayılar px olarak (yön ters çevrildiğinde rem/em olarak) okunur; diğer birimle yazılmış bir değer ters yönde dönüştürülür.
2. Temel yazı boyutunu ayarlayın. Tüm tarayıcılarda varsayılan 16px’tir; bazı projeler 1rem = 10px olsun diye html { font-size: 62.5% } yazar.
3. Yönü (px → rem veya rem → px), Birimi (rem veya em) ve kaç Ondalık basamak tutulacağını seçin.
4. İsterseniz Bundan küçükleri px bırak ile 1px kenarlıkları ve diğer ince çizgileri px olarak bırakın.
5. Sonucu üstündeki düğmeyle kopyalayın.

Örnek

/* before */
.title { font-size: 24px; margin-bottom: 12px; }

/* after (base 16px) */
.title { font-size: 1.5rem; margin-bottom: 0.75rem; }

Yüzdeler, renkler, url() içindeki dosya adları ve .mt-16px gibi sınıf adları gibi px olmayan değerlere dokunulmaz. 0px, 0 olur.

px, rem ve em

• px mutlak bir birimdir ve okuyucunun tercih ettiği yazı boyutunu yok sayar.
• rem (“root em”), html öğesinin yazı boyutunun katıdır. Okuyucu tarayıcısını 20px’e ayarlarsa 1rem 20px olur ve tüm düzen onunla ölçeklenir.
• em, geçerli öğenin yazı boyutunun katıdır. Ait olduğu metni izlemesi gereken boşluklar için kullanışlıdır, ancak iç içe em değerleri çarpılır; bu yüzden varsayılan olarak rem daha güvenlidir.

Medya sorguları da dönüştürülür: @media (min-width: 768px) ifadesi 48rem (veya 48em) olur; böylece okuyucu metni büyüttüğünde kırılma noktaları tutarlı kalır. Medya sorgularında rem ve em, html kuralınızı değil tarayıcının varsayılan yazı boyutunu temel alır.