CSS Academy · Ders

Göreli Birimler: em ve rem

em ve rem birimlerini kullanarak öğeleri üst öğenin veya kök yazı tipinin boyutuna göre boyutlandırın.

2. ders / 413 adım

Göreli Birimler: em ve rem, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

Göreli Birimler Nelerdir?

Göreli birimler başka bir ölçüme (genellikle bir öğenin veya kökün yazı tipi boyutuna) göre ölçeklenir. Kullanıcı ayarlarına saygı duyan ölçeklenebilir, duyarlı tasarımlar oluşturmanızı sağlar.

em — Üst Öğenin Yazı Tipi Boyutuna Göreli

em, geçerli öğenin yazı tipi boyutuna (font-size özelliğinin kendisi için) veya üst öğenin yazı tipi boyutuna (diğer özellikler için) göre belirlenir. Bu durum katlanmaya neden olabilir.

<div class="parent">
    Parent (20px)
    <div class="child">
      Child (1.5em = 30px)
      <div class="grandchild">Grandchild (1.5em = 45px!)</div>
    </div>
  </div>

Aralıklar İçin em

em, padding, margin veya border-radius için kullanıldığında öğenin kendi yazı tipi boyutuna göre belirlenir. Böylece orantılı olarak ölçeklenen bileşenler oluşturulur.

<button class="button">Padded Button</button>

rem — Kök Yazı Tipi Boyutuna Göreli

rem (root em), kök öğenin yazı tipi boyutuna (html) göre belirlenir. Katlanmaya neden olmaz ve sayfanın her yerinde öngörülebilirdir.

<h1>Heading (2.5rem = 40px)</h1>
  <p>Paragraph text (1rem = 16px)</p>
  <small>Small print (0.75rem = 12px)</small>

rem ve Kullanıcı Erişilebilirliği

Kullanıcı, tarayıcının temel yazı tipi boyutunu okunabilirlik için 16px'ten 20px'e çıkarırsa rem birimleri buna uygun olarak ölçeklenir. Sabit px birimleri ölçeklenmez. Tipografi için rem kullanımının özellikle önerilmesinin nedeni budur.

Yüzde Olarak html font-size

Kullanıcının tarayıcı ayarlarına saygı göstermek için kök yazı tipi boyutunu yüzde olarak ayarlayın:

<p>Root font-size respects the browser/user default (100%).</p>

em ve rem Arasında Seçim

Pratik bir kılavuz:

Yazı tipi boyutları, boşluk belirteçleri ve düzen ölçüleri için rem kullanın
Bileşenin yazı tipi boyutuyla ölçeklenmesi gereken bileşen içi aralıklar için em kullanın (örneğin bir düğmedeki padding)

Medya Sorgularında em

em ile belirtilen medya sorguları, tarayıcının yazı tipi boyutu değişikliklerine yanıt verir. 48em kırılma noktası, varsayılan ayarlarda 768px'e eşittir; ancak kullanıcı temel yazı tipi boyutunu değiştirdiyse buna uyum sağlar.

<div class="layout">
    <div>Column A</div>
    <div>Column B</div>
  </div>

em Hesaplama

Formül: desired px / parent px = em value. Üst öğe 16px ise ve 24px metin istiyorsanız: 24/16 = 1.5em.

<h2>Heading (24px via 1.5rem)</h2>
  <p>Paragraph (18px via 1.125rem)</p>

Birikimli em Sorunu

em boyutlu öğeleri iç içe yerleştirmek, yazı tipi boyutunun çarpımsal olarak katlanmasına neden olur. Bu nedenle yazı tipi boyutunda rem tercih edilir; rem her zaman köke başvurarak katlanmayı önler.

ch — Karakter Genişliği

ch birimi, geçerli yazı tipindeki "0" karakterinin genişliğine eşittir. Metin kapsayıcılarını okunabilir satır uzunluklarıyla sınırlamak için kullanışlıdır:

<p class="article-body">This paragraph is constrained to about 70 characters per line using the ch unit, which keeps text at a comfortable, readable line length regardless of font size.</p>

Hızlı Kontrol

Bir düğmede font-size: 1.25rem ve padding: 0.5em bulunuyor. Kök yazı tipi boyutu 16px ise padding değeri piksel cinsinden kaçtır?

İnteraktif derste cevapla

Özet

em, geçerli öğenin yazı tipi boyutuna (font-size özelliğinin kendisi için üst öğeye) göre ölçeklenir; bu değer katlanabilir. rem her zaman köke göre ölçeklenir ve asla katlanmaz. Tipografi ve genel aralıklar için rem, bileşen içi orantılı aralıklar için em kullanın.

Başlamak ücretsiz

Yapay zeka eğitmeniyle CSS öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 40
Dersler: 159

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Göreli Birimler: em ve rem” dersi ücretsiz mi?

Evet — “Göreli Birimler: em ve rem” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“Göreli Birimler: em ve rem” dersinde ne öğreneceğim?

em ve rem birimlerini kullanarak öğeleri üst öğenin veya kök yazı tipinin boyutuna göre boyutlandırın. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Göreli Birimler: em ve rem” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← CSS Academy Sayfasına Dön