HesapHanem

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

CSS piksel boyutlarını rem’e dönüştürün.

Nasıl hesaplanır?

CSS'te 1 rem, kök elemanın yazı boyutuna eşittir. Araç piksel değerini bu temel boyuta böler: rem = px / temel. Temel boyutu boş bırakırsanız veya pozitif olmayan bir değer girerseniz tarayıcıların olağan varsayılanı olan 16 px kullanılır. Ayrıca pt = px × 0,75 ile punto da verir, çünkü CSS 96 px'i 72 pt olarak tanımlar.

İki sonuç da iki ondalığa yuvarlanır. Negatif piksel değerleri olduğu gibi çevrilir. Dönüşüm yalnızca verdiğiniz temel boyut için geçerlidir: sayfa html { font-size: 62.5% } tanımlıyorsa kök boyut 10 px olur; tarayıcının varsayılan yazı boyutunu büyüten kullanıcılarda rem değerleri onunla birlikte ölçeklenir, px değerleri ölçeklenmez.

Örnek hesaplama

Bir başlığı 24 px yapmak istiyorsunuz ve sayfanın temel yazı boyutu 16 px. rem = 24 / 16 = 1,5 olur. Punto için 24 × 0,75 = 18 bulunur. Araç 1,50 rem ve 18,00 pt gösterir; CSS'te bu başlık için 1.5rem yazabilirsiniz.

Bu örneği dene →

Sık yapılan hatalar

  • 1 rem'in her zaman 16 px olduğunu sanmak; o, sayfanın kök yazı boyutunu izler ve değiştirilebilir.
  • rem ile em'i karıştırmak: em üst elemana, rem köke bağlıdır.
  • Punto sonucunu ekran boyutları için kullanmak; punto baskı içindir ve 0,75 çarpanı bir CSS tanımıdır.
  • Kök boyutu piksel alanına, hedef boyutu temel alanına yazmak.

Bu hesaplama hakkında

Bu çevirici, bir piksel değerini genellikle 16px olan (tarayıcıların varsayılan yazı boyutu) temel yazı boyutuna bölerek rem birimine çevirir, ayrıca punto karşılığını da gösterir. Rem birimi kök yazı boyutuna göreli olduğu için, bu işlem tarayıcının rem tabanlı CSS'i render ederken tersten yaptığı hesabın aynısıdır.

Ön yüz geliştiricileri, Figma veya Sketch gibi tasarım dosyalarındaki piksel ölçülerini CSS stil sayfasında kullanılan rem birimine çevirirken bu aracı sürekli kullanır; bu da kullanıcı tarayıcı yazı boyutunu değiştirdiğinde tipografi ve boşlukların doğru ölçeklenmesini sağlar.

Bu faydalı oldu mu?

En fazla 3 tepki seçebilirsiniz.

Yorumlar (1)

  • Editör ekibi

    Medya sorgularında bir tuzak var: tarayıcılar rem değerini orada html öğesine verdiğiniz daha küçük ya da büyük boyuta göre değil, tarayıcının başlangıç yazı boyutuna göre çözer. Yani 48rem'lik bir kırılma noktası yüzde 62,5'lik kök ayarını izlemez, yalnızca tarayıcı varsayılanı geçerlidir. Sayfanın içinde ise girdiğiniz taban değer kök boyutunuzla eşleşmelidir. Projelerinizde hangi taban boyutu kullanıyorsunuz?

Popüler hesaplayıcılar

Kredi Hesaplama

Aylık taksit, toplam faiz ve ödeme planını hesaplayın.

Yüzde Hesaplama

Yüzde değişim, indirim ve oran hesaplamaları.

İndirim Hesaplama

İndirimli fiyatı, kazancı ve indirim tutarını hesaplayın.

Vücut Kitle Endeksi (VKİ)

Boy ve kiloya göre vücut kitle endeksini hesaplayın.

Yaş Hesaplama

Doğum tarihinden bugüne tam yıl, ay ve gün cinsinden yaşınızı hesaplayın.

Bileşik Faiz Hesaplama

Ana para, faiz oranı ve süreye göre bileşik faizle nihai tutarı hesaplayın.

Tüm Hesaplayıcılar