CSS Birimleri Açıklanıyor: px, rem, em, vh — ve Hangisi Ne Zaman Kullanılmalı
Yanlış CSS birimini seçmek; farklı ekran boyutlarında bozulan düzenlere, kullanıcı tercihlerini görmezden gelen yazı tiplerine ve tutarsız görünen boşluklara neden olur. İşte her seferinde doğru birimi seçmeniz için pratik bir kılavuz.
CSS Birimlerinin Önemi
CSS'in bir düzineden fazla uzunluk birimi vardır, ancak çoğu geliştirici uygulamada beşini kullanır: px, rem, em, % ve viewport birimleri olan vh ile vw. Yanlış seçim her zaman bariz değildir — düzen ekranınızda düzgün görünebilir ancak başkasının ekranında bozulabilir veya görsel QA aşamasını geçip kullanıcı'nın tarayıcı yazı tipi boyutu tercihini görmezden geldiği için bir erişilebilirlik denetiminde kalabilir.
Bu kılavuz, her birimin gerçekte neyi ölçediğini açıklar, her durum için somut bir karar kuralı sunar ve kod incelemelerinde tekrar tekrar karşımıza çıkan hataları kapsar.
px — Mutlak Piksel
Bir CSS px, mutlaka fiziksel bir ekran pikseli değil, cihazdan bağımsız bir piksele karşılık gelir. 2x retina ekranında, bir CSS px, 2 fiziksel piksel kullanılarak işlenir. Bu, px'in görsel boyut açısından ekranlar arasında tutarlı olduğu anlamına gelir ancak mutlaktır — herhangi bir şeyle ölçeklenmez.
px ne zaman kullanılmalı:**
- Kenarlıklar:
border: 1px solid— 1px'lik bir kenarlık, bağlamdan bağımsız olarak her zaman ince bir çizgi gibi görünmelidir - Kutu gölgeleri ve dış hatlar (outlines): ölçeklenmemesi gereken hassas detaylar
- Media query kırılma noktaları:
@media (min-width: 768px) - Sabit boyutlu dekoratif öğeler (belirli boyutlu ikonlar, ayırıcılar)
px ne zaman kullanılmamalı:** Yazı boyutları, padding ve margin için. Küçük metinleri okumakta zorlandığı için tarayıcı yazı boyutunu 20px olarak ayarlayan bir kullanıcı, eğer her şey px cinsinden sabit kodlanmışsa düzeninizden fayda sağlayamaz. Tercihi tamamen göz ardı edilmiş olur.
rem — Root Em
rem ifadesi "root em" anlamına gelir. Her zaman html öğesinin font-size değerine göredir, asla üst öğeye (parent) bağlı değildir. Bu, onu em biriminin aksine öngörülebilir kılar.
Varsayılan olarak çoğu tarayıcı kök yazı boyutunu 16px olarak ayarlar. Yani:
1rem = 16px | 1.5rem = 24px | 0.875rem = 14px
rem ne zaman kullanılmalı:**
- Yazı boyutları — rem, kullanıcının tarayıcı yazı tercihine saygı duyar
- Tip boyutuyla tutarlı şekilde ölçeklenmesi gereken boşluklar (padding, margin, gap)
- Her şeyin birlikte ölçeklenmesini istediğiniz bileşen boyutlandırmaları
%62.5 hilesi:** Bazı geliştiriciler 1rem'i 10px yapmak için html { font-size: 62.5%; } ayarını yapar (çünkü 16px'in %62.5'i = 10px). Bu, zihinsel matematik işlemlerini kolaylaştırır: <1.4rem = 14px. Dezavantajı ise dikkatli kullanmadığınız sürece kullanıcının temel yazı tercihini geçersiz kılmasıdır — bunu sadece erişilebilirlik sonuçlarını anladığınızda ve bileşen düzeyinde geçersiz kılma işlemlerini yaptığınızda yapın.
em — Üst Ögeye Göre (Relative to Parent)
em, mevcut öğenin hesaplanmış yazı boyutuna (veya font-size'in kendisine uygulandığında üst ögeye) göredir. Bu, kendi metin boyutuna oranla ölçeklenmesi gereken bileşenler için onu kullanışlı kılar.
Klasik kullanım durumu: buton padding'i. Eğer <padding: 0.5em 1em> yazarsanız, butonun yazı boyutunu değiştirdiğinizde buton padding'i otomatik olarak ölçeklenir — küçük butonlar daha küçük padding alır, büyük butonlar daha fazla alır.
.btn { font-size: 1rem; padding: 0.5em 1em; }
.btn-lg { font-size: 1.25rem; /* padding otomatik ölçeklenir */ }
Birleşme (compounding) sorunu:** em yazı boyutlarıyla öğeleri iç içe geçirdiğinizde bunlar çarpılır. <1.2em değerindeki bir üst öge ve <1.2em değerindeki bir alt öge, alt ögeye <1.44em etkili boyut kazandırır. Bu yüzden çoğu durumda yazı boyutları için rem tercih edilir — rem her zaman köke (root) referans verir, bu nedenle iç içe geçme işlemleri çarpılmaz.
em ne zaman kullanılmalı:** Boyutların bileşenin kendi yazı boyutunu takip etmesini istediğiniz bileşenler üzerindeki padding, margin ve line-height. İç içe geçmiş bileşenlerdeki font-size için em'den kaçının.
% — Yüzde
Yüzde her zaman üst ögenin karşılık gelen boyutuna görelidir. Genişlik yüzdeleri üst genişliğe; yükseklik yüzdeleri ise (bazı istisnalar dışında) üst yüksekliğe göredir.
Özellikle akışkan düzenler için çok kullanışlıdır: <width: 100%, "mevcut tüm genişliği kapla" anlamına gelir. max-width ile birlikte kullanıldığında esnek konteynerler oluşturur:
.container { width: 100%; max-width: 1200px; margin: 0 auto; }
Yazı boyutu (font-size) için yüzde, em gibi davranır — üst öge ile çarpılır. Daha öngörülebilir sonuçlar için bunun yerine rem kullanın.
vh, vw — Viewport Birimleri
<1vh = viewport yüksekliğinin %1'i. <1vw = viewport genişliğinin %1'i. Bunlar herhangi bir öğeye bağlı değildir — her zaman tarayıcı penceresi boyutuna referans verirler.
Viewport birimleri ne zaman kullanılmalı:**
- Tam ekran bölümleri:** Ekranı tam olarak kaplayan bir hero alanı için <
height: 100vh - Akışkan tipografi:** Media query'ler olmadan ekran boyutları arasında pürüzsüz ölçeklenen metinler için <
font-size: clamp(1rem, 2.5vw, 2rem) - Tam genişlikteki görseller veya videolar:** Bir konteynerden taşmak için <
width: 100vw
Mobil tarayıcı çubuğu sorunu:** Mobil tarayıcılarda, adres çubuğu kaydırdıkça görünür ve gizlenir, bu da viewport yüksekliğini değiştirir. <100vh içeriğin kesilmesine veya kaydırma çubuklarının oluşmasına neden olabilir. CSS bu durumu yönetmek için <dvh (dinamik viewport yüksekliği), <svh (küçük — adres çubuğu görünür) ve <lvh (büyük — adres çubuğu gizli) birimlerini ekledi. dvh için tarayıcı desteği 2024+ döneminde iyidir. Mobil cihazlarda tam ekran düzenleri için <height: 100dvh kullanın.
CSS Birimi Karar Kılavuzu
| Boyutlandıracağınız öğe | Şunu kullanın | Neden |
|---|---|---|
| Gövde / küresel yazı boyutu | rem | Kullanıcı tercihine saygı duyar, birleşme yapmaz |
| Bileşen yazı boyutu | rem | Tutarlı, öngörülebilir |
| Bileşen padding / margin | em veya <rem | Yazı boyutunu takip etmesini istiyorsanız em; tutarlılık için rem |
| Kenarlıklar, kutu gölgeleri | px | Asla ölçeklenmemelidir |
| Media query kırılma noktaları | px veya <em | Basitlik için px; kırılma noktalarının yazı tercihleriyle ölçeklenmesi için em |
| Akışkan konteyner genişliği | % + <max-width | Mevcut alanı kaplar, maksimumda sabitlenir |
| Tam yükseklikli hero bölümü | 100dvh | Mobil tarayıcı çubuklarını hesaba katar |
| Akışkan tipografi | <clamp() ile rem + vw | Kırılma noktaları arasında pürüzsüz ölçeklenir |
En Yaygın Hatalar
1. Tüm yazı boyutları için px kullanmak. Bu erişilebilirliği bozar. Tarayıcı temel yazı boyutunu artıran kullanıcılar, metninizin değişmediğini görecekler. Yazı boyutları için rem kullanın, böylece arayüz bu tercihe saygı duyar.
2. İç içe geçmiş bileşenlerde yazı boyutları için em kullanmak. Birleşme sorunu burada ortaya çıkar. Bir modal içindeki kartın içindeki menü 3 katlı birleşmeye (compounding) uğrayabilir. Yazı boyutları için rem kullanın.
3. dvh geri dönüşü olmadan tam ekran düzenleri için vh kullanmak. Mobilde, adres çubuğu yerleşim kaymalarına neden olur. <min-height: 100svh veya <height: 100dvh kullanın.
4. % yüksekliğinin açık bir yükseklikte sahip üst öğe gerektirdiğini unutmak. Üst ögenin <height: auto değerine sahip olduğu durumda, alt ögedeki <height: 100% hiçbir etki göstermez. Bunun yerine <vh veya Flexbox kullanın.
px → rem Dönüştürme Formülü
Varsayılan kök yazı boyutu 16px'dir. Dönüştürme formülü:
Örnek: <
24px ÷ 16 = 1.5rem
Piksel çıktı veren bir tasarım aracıyla çalışıyorsanız, PX to REM Converter aracımız matematiği anında halleder. Herhangi bir px değerini (veya bir liste) yapıştırın ve özel kök boyut desteğiyle rem karşılığını alın.
px'i anında rem'e dönüştür
Herhangi bir piksel değerini yapıştırın ve rem karşılığını alın. Özel temel yazı boyutlarını destekler.