Bu dönüştürücü ne yapar
Bu araç piksel (px) değerlerini rem ve em'e, istediğiniz zaman da tersine dönüştürür. Üç birim alanından herhangi birine bir değer yazdığınızda, diğer iki alan otomatik olarak hesaplanır ve gösterilir. Sadece dönüştürme yapmakla kalmaz; kendi tasarımınıza uygun bir kök yazı boyutu ve bir em bağlam yazı boyutu belirlemenize de izin verir, böylece sonuçlar genel bir varsayımı değil sizin projenizin gerçek ölçeğini yansıtır.
px, rem ve em — her alan neyi temsil ediyor
Araç üç alan üzerine kurulu. Kök yazı boyutu (px) alanı, rem değerlerinin kendisine göre hesaplandığı temel yazı boyutunu piksel cinsinden tutar. em bağlam yazı boyutu (px) alanı ise em değeri hesapladığınız o belirli elemanın yazı boyutunu piksel cinsinden tutar. Değerler alanı, dönüştürmek istediğiniz uzunluğu px, rem veya em cinsinden girdiğiniz yerdir. Herhangi bir şeyi değiştirmeden önceki başlangıç noktasında 16px, 1rem ve 1em aynı uzunluğu ifade eder — araç, siz değiştirene kadar bu temel değerden başlar.
Kök ve em bağlam yazı boyutunuzu ayarlamak
Kök yazı boyutu alanı sade bir sayıdır ve 0'dan büyük olmak zorundadır. Varsayılan değeri 16px'tir; araç her oturuma, siz değiştirmediğiniz sürece bu değerle başlar. rem dönüşümleriniz bu rakama göre hesaplanır, dolayısıyla projenizin gerçek kök yazı boyutu varsayılandan farklıysa bu alanı güncellemek rem değerlerinin sizin tasarımınız için doğru çıkmasını sağlar. Alanı boş bırakır ya da geçersiz bir değer girerseniz araç "Kök yazı boyutu 0'dan büyük bir sayı olmalıdır." mesajını gösterir.
em bağlam yazı boyutu alanı da aynı şekilde çalışır — 0'dan büyük bir sayı olmalı ve varsayılan olarak 16px'tir — ama farklı bir amaca hizmet eder. Bir em değeri, sayfanın kökü değil, ait olduğu elemanın yazı boyutuna göre ölçüldüğü için araç bu elemanın yazı boyutunu ayrı bir alanda sorar. Belirli bir elemana özgü bir em değeri hesaplamanız gerektiğinde kullanacağınız alan budur. Buraya geçersiz bir değer girerseniz "em bağlam yazı boyutu 0'dan büyük bir sayı olmalıdır." mesajı görünür.
Değerleri girmek ve dönüşümü izlemek
Değerler bölümü, üç birimin her biri için ayrı bir alan sunar. Bunlardan birini — px, rem veya em — düzenlediğinizde, o anda ayarlı olan kök ve em bağlam yazı boyutlarını kullanarak diğer ikisi siz yazarken yeniden hesaplanır; araç bu davranışı "Bir px, rem veya em değeri girin — siz yazarken diğer ikisi güncellenir." ipucuyla, sonucu da "Her üç birim arasında dönüştürüldü." mesajıyla özetler. Örneğin kök ve em bağlam yazı boyutlarını 16px varsayılanında bırakıp px alanına 24 yazarsanız, rem alanı 1,5 olarak güncellenir ve em alanı da 1,5 olarak güncellenir; çünkü 24'ün 16'ya bölümü 1,5'tir.
Negatif piksel değerleri de kabul edilir, yani -8px gibi bir değer pozitif bir değerle aynı mantıkla dönüştürülür — 16px varsayılanında bu -0,5rem'e karşılık gelir (-8'in 16'ya bölümü -0,5'tir). Değerler alanına geçerli bir sayı olmayan bir şey girerseniz araç "Dönüştürmek için bir sayı girin." mesajını gösterir.
Kök yazı boyutunu veya em bağlam yazı boyutunu değiştirmek, alanlarda zaten girilmiş olan değeri de günceller. Örneğin px alanına 40 girilmişken kök 16px'te 2,5rem gösterir. Kök yazı boyutunu px alanına dokunmadan 20px'e çıkardığınızda rem alanı 2'ye güncellenir (40'ın 20'ye bölümü 2'dir) — yani rem çıktısı yalnızca yazdığınız piksel sayısını değil, o anda geçerli olan kök yazı boyutunu izler.
Yaygın px → rem tablosunu okumak
Dönüştürme alanlarının altında araç, Yaygın px → rem (16px tabanlı) başlıklı bir tablo gösterir; bu tablo, yaygın kullanılan piksel değerlerinin 16px'lik bir kök yazı boyutuna göre rem karşılıklarını listeler. Bu tablo, canlı dönüştürme alanlarının yanında sabit bir referans olarak durur; her değeri tek tek Değerler alanına yazmadan birkaç tipik değeri hızlıca kontrol etmek istediğinizde işinize yarar.
Verileriniz nerede işleniyor
Her dönüştürme tarayıcınızda çalışır. Yazdığınız hiçbir şey BroBroGo sunucularına yüklenmez.
Bu araç kimler için
Sabit piksel değerlerini duyarlı (responsive) bir tasarım için göreli rem veya em birimlerine dönüştürmesi gereken herkes için tasarlandı. Kök yazı boyutunu değiştirmenin ortaya çıkan rem değerlerini nasıl etkilediğini görmek isteyenler ve belirli bir elemanın kendi yazı boyutuna bağlı bir em değeri hesaplaması gerekenler için de uygun. Bir okuyucu tarayıcısının varsayılan yazı boyutunu değiştirdiğinde boyutlandırmanızın beklediğiniz gibi ölçeklenmeye devam ettiğinden emin olmak istediğinizde de kullanışlı.
Sıkça sorulan sorular
px, rem ve em arasındaki fark nedir? px sabit bir uzunluktur. rem, sayfanın kök yazı boyutuna göre ölçülür, bu nedenle 16px'lik bir kökte 1rem, 16px'e eşittir. em ise içinde bulunduğu elemanın yazı boyutuna göre ölçülür. Yazı boyutlarını ve boşlukları rem cinsinden belirlemek, bir okuyucu varsayılan yazı boyutunu değiştirdiğinde her şeyin ölçeklenmesini sağlar.
Neden ayrı bir em bağlam boyutu var? em, her zaman kök eleman olmayan, kendi elemanının yazı boyutuna göredir. em değerini doğru okumak için em bağlamını o elemanın yazı boyutuna ayarlayın ve ikisi eşleştiğinde kök değerle eşit tutun.
Kök yazı boyutum 16px değilse ne olur? CSS kodunuzla eşleşmesi için kök yazı boyutu (root font size) alanını değiştirin; her rem değeri anında güncellenir. Aşağıdaki hızlı tablo, çoğu sitenin başladığı yaygın 16px kök boyutu için pratik bir kılavuzdur.
Negatif piksel değeri dönüştürebilir miyim? Evet. Araç negatif piksel değerlerini kabul eder ve bunları pozitif değerlerle aynı şekilde dönüştürür.
Bir alana harf yazarsam ya da alanı boş bırakırsam ne olur? Her alan kendi başına doğrulanır. Değerler alanındaki geçersiz bir giriş "Dönüştürmek için bir sayı girin." mesajını, geçersiz bir kök yazı boyutu "Kök yazı boyutu 0'dan büyük bir sayı olmalıdır." mesajını, geçersiz bir em bağlam yazı boyutu ise "em bağlam yazı boyutu 0'dan büyük bir sayı olmalıdır." mesajını gösterir.