Softonic

EM'den REM'e Dönüştürücü

Adım 1 / 2 rem
Sonuçlar

Bir tasarımcı size Figma spesifikasyonlarını piksel cinsinden gönderir, kod tabanı rem kullanır ve bileşenlerin yarısı, değerin üst öğenin yazı tipi boyutuna göre değiştiği yerlerde em ile yazılmıştır. Bu dönüştürücü, herhangi bir kök yazı tipi boyutunda her em değerinin px ve rem karşılığını hesaplar; böylece her seferinde kafanızdan yeniden hesaplamadan doğru değeri doğrudan CSS dosyasına kopyalayabilirsiniz.

Em, Rem ve pikselleri nasıl dönüştürürüz?

  1. 1

    Temel yazı tipi boyutunu ayarlayın

    Genellikle tarayıcının varsayılan değeri olan 16px'dir. Bazı tasarım sistemleri ise kök boyut olarak 14px veya 18px kullanır.

  2. 2

    Em için ana yazı tipi boyutunu ayarlayın

    1 em, ana elemanla ilişkilidir. Ana eleman 20px ise 1 em = 20px'dır.

  3. 3

    Bir değer girin

    em birimiyle; px ve rem karşılıkları otomatik olarak güncellenir.

  4. 4

    Dönüştürmeyi okuyun

    px, em ve rem değerlerinde yuvarlanmış ve kesin ondalık sayılar gösterilmiştir.

Formüller

rem her zaman kök elemanına (<html>) göre belirlenir:

px = rem * root_font_size rem = px / root_font_size

em, mevcut elemanın ebeveynine göre belirlenir:

px = em * parent_font_size em = px / parent_font_size

16px kök düzeyindeki dönüşümler

Pikseller rem em (ana boyutunda 16px)
10 0.625 0.625
12 0.75 0.75
14 0.875 0.875
16 1 1
18 1.125 1.125
20 1.25 1.25
24 1.5 1.5
32 2 2
48 3 3
64 4 4

Hangisini ne zaman kullanmalı

  • px: kenarlar, ince ayrıntılar ve hassas kontrol. 1px kutu gölgesi, 1px kenar.
  • rem: Kullanıcının yazı tipi tercihine göre ölçeklenecek marjlar, aralıklar ve tipografi.
  • em: Kendi yazı tipi boyutuna uyum sağlayan bileşen lokal aralığıdır (butonlar, nişanlar).
  • % ve vw/vh: konteyner’e göre ve görünüm alanına göre; ayrı konular.

%62,5’lik hile

Bazı kod tabanları html { font-size: 62.5%; } değerini belirler ve bu da 1rem’in 10px’e eşdeğer olduğunu gösterir. Bu durum, metni büyütürken kullanıcıların tarayıcıda belirlediği yazı boyutu ayarlarını bozmakla birlikte, rem hesaplamalarını kolaylaştırır (örneğin 24px = 2,4rem). Günümüzde bu tür uygulamalardan kaçınılmaktadır; bunun yerine 16px’lık kök değer kullanılır ve ondalık rakamlara tolerans gösterilir.

em devralma tuzağı

em, kaskad boyunca devralınır. Bir üst öğenin yazı tipi boyutu kendi üst öğesine göre 1.2em ise ve içine 1em padding verirseniz, padding değeri 1.2 × 1.2 = 1.44 × kök olur. İç içe geçmiş em değerleri birbiriyle çarpılarak birikir ve beklenmedik sonuçlar doğurabilir. rem bundan kaçınır, çünkü her zaman <html> öğesine göre çözümlenir.

Tipografi Ölçeği Örneği

1,25 oranında yaygın modüler tip ölçek:

Seviye rem px (16 kök üzerinde)
Açıklama 0.75 12
Gövde metni 1 16
Gövde metni+ 1.125 18
H4 1.25 20
H3 1.5625 25
H2 1.953 ~31
H1 2.441 ~39
Öne çıkan 3.052 ~49

Rem kullanıldığında, kullanıcı erişilebilirlik amacıyla tarayıcının yazı tip boyutunu büyütürse her seviye orantılı olarak ölçeklenir.

Kullanıcı tercihlerine saygı göstermek

Bir stil sayfasında px değerinin sabit olarak kodlanması, kullanıcıların görsel nedenlerle metni büyütmesini engeller. Rem, kullanıcı tarafından değiştirilebilen temel boyuta göre hareket edildiği için bu tercihleri korur. İşte bu yüzden stil kılavuzları tipografi ve boşluk ayarlarında rem kullanmayı önerir.

Sık Sorulan Sorular

Tipografi, boşluk ve düzen boyutları için rem kullanın. Bileşenin kendi yazı tipi boyutuyla birlikte ölçeklenmesi gereken bileşen içi boyutlar (düğmeler, metin içindeki simgeler) için em kullanın. Ölçeklenmemesi gereken ince ayrıntılar için yalnızca px kullanın.

Kullanıcılar tarayıcısının standart yazı tip boyutunu değiştirebilir. Chrome varsayılan olarak 16px’dir; kullanıcı 18px ayarladığında tüm metinler %12,5 daha büyük görünür. Sabit 16px değerini varsayan tasarımcılar bu farkı genellikle gözden kaçırır; ama Rem bu seçimi korur ve işte asıl mesele de budur.

Tailwind’ın aralık ölçeği “rem” birimi kullanır. Standart olarak text-base için 1 rem = 16px, text-lg için ise 1,125 rem geçerlidir. Ölçek tutarlıdır ve varsayılan değerlerde kök yazı tip boyutunu korur.

Hayır. Girdiğiniz sayılar yalnızca dönüşümü hesaplamak için kullanılır ve hiçbir şey kaydedilmez.

İlgili Araçlar

ASCII Tablosu Referansı

NUL, LF ve DEL dahil her kod için ondalık, onaltılık, sekizlik ve ikili değerlerle HTML sayısal karakter başvurusu gösterimini sunan tam ASCII tablosu.

HTML Karakter Referansı

HTML varlıklarının aranabilir listesi; adlandırılmış ve sayısal kodlarıyla birlikte özel karakter ve semboller için tek tıkla kopyalama.

Klavye kısayolları başvurusu

macOS, Windows ve Linux’ta VS Code, Chrome ve GNU Readline kullanan Bash için belgelenmiş varsayılan kısayolları arayın.

EditorConfig Oluşturucu

Girinti stili ve boyutu, satır sonu, karakter kümesi ve boşluk kurallarınızla bir .editorconfig dosyası oluşturarak IDE ve editörler arasında tutarlı biçimlendirme sağlayın.

E-posta Doğrulayıcı

Bir e-posta adresini doğrulayın: RFC 5322 sözdizimi kontrolü, canlı MX kaydı sorgulama, ayrıca yerel kısım, alan adı ve uzunluk bilgileri. Hiçbir e-posta gönderilmez.

Gradyan Duvar Kağıdı Oluşturucu

Dizüstü bilgisayar, telefon veya Zoom arka planları için bulanık üç renkli gradyan duvar kağıtları oluşturun. Açıyı ve bulanıklığı rastgele belirleyin ya da elle ayarlayın.

Araç diğer dillerde mevcuttur