CSS Birim Dönüştürme Rehberi: px, rem, em, vw, vh Detaylı Anlatım

Doğru CSS birimini seçmek, stil sayfaları yazarken en etkili kararlardan biridir. Seçtiğiniz birim, öğelerin farklı ekran boyutlarında nasıl ölçekleneceğini, kullanıcı tercihlerine (tarayıcı yazı tipi boyutu ayarları gibi) nasıl yanıt vereceğini ve düzenin öngörülebilir davranışını belirler. Ancak birçok geliştirici, alışkanlıkla piksel kullanır ve göreli birimlerin sunduğu esneklik ve erişilebilirlik avantajlarını kaçırır. Bu rehber, tüm önemli CSS birimlerini kapsar, her birini ne zaman kullanacağınızı açıklar, aralarında nasıl dönüşüm yapacağınızı gösterir ve modern duyarlı tasarım için pratik en iyi uygulamaları sunar.

CSS Birim Sınıflandırmasını Anlama

CSS birimleri iki ana kategoriye ayrılır: mutlak birimler ve göreli birimler. Mutlak birimler sabit fiziksel boyutlara sahipken, göreli birimler hesaplanan değerlerini başka bir referans noktasından türetir. Bu ayrımı anlamak, bilinçli birim seçimleri yapmanın temelidir.

Mutlak Birimler

Mutlak birimler sabit boyutlu ölçülerdir. Web geliştirmede en yaygın kullanılan mutlak birim pikseldir (px). Diğer mutlak birimler arasında punto (pt), santimetre (cm), milimetre (mm) ve inç (in) bulunur. Bu birimler öncelikle yazdırma stil sayfaları için veya bağlama göre değişmeyen ölçülere ihtiyacınız olduğunda kullanılır. Ekran tabanlı CSS'te, düzenli olarak kullanacağınız tek mutlak birim px'tir.

Göreli Birimler

Göreli birimler, nihai değerlerini bir referans değerine göre hesaplar. em geçerli öğenin yazı tipi boyutuna göre, rem kök öğenin yazı tipi boyutuna göre, vw ve vh görünüm alanı boyutlarına göre, yüzde ise üst öğeye göredir. Göreli birimler, düzeninizin farklı bağlamlara otomatik olarak uyum sağlamasına olanak tanıdığı için duyarlı ve erişilebilir tasarımın temel taşıdır.

Piksel (px): Temel Birim

Piksel, en sezgisel CSS birimidir çünkü doğrudan ekran piksellerine eşlenir (cihaz piksel oranıyla ilgili bazı nüanslarla). px değeri bağlamdan bağımsız olarak her zaman aynıdır, bu da onu öngörülebilir ve anlaşılması kolay kılar. Ancak, bu öngörülebilirliğin bir bedeli vardır: piksel tabanlı boyutlar, kullanıcı tarayıcı varsayılan yazı tipi boyutunu değiştirdiğinde ölçeklenmez, bu da erişilebilirlik sorunları yaratır.

px Ne Zaman Kullanılır

• Kenarlık genişliği: 1px kenarlık, yazı tipi boyutu ayarlarından bağımsız olarak 1px kalmalıdır.
• Kutu gölgesi: Gölge ofseti ve bulanıklık yarıçapı, tutarlı görsel efekt için genellikle piksel olarak en iyisidir.
• İnce ayrıntılar: İnce çizgi ayırıcılar veya hassas simge konumlandırma gibi ölçeklenmesi görsel tasarımı bozacak değerler.
• Kök yazı tipi boyutu: html { font-size: 16px; } olarak ayarlamak yaygın bir desendir, ancak kullanıcının tarayıcı varsayılanlarına saygı duymalısınız.

px'ten Ne Zaman Kaçınılır

Yazı tipi boyutları, iç boşluklar, dış boşluklar ve kullanıcı tercihlerine uyum sağlaması gereken düzen boyutları için px kullanmaktan kaçının. Tarayıcı yazı tipi boyutunu 20px'e çıkaran bir kullanıcı, tüm metnin buna göre ölçeklenmesini bekler, ancak px tabanlı yazı tipi boyutları bu değişikliğe yanıt vermez.

rem: Kök Göreli Boyut

rem birimi (root em), kök öğenin (html) yazı tipi boyutuna göredir. Çoğu tarayıcıda, varsayılan kök yazı tipi boyutu 16px'tir, bu nedenle 1rem = 16px, 0.5rem = 8px, 2rem = 32px. rem'in temel avantajı, kullanıcı tarayıcı varsayılan yazı tipi boyutunu değiştirdiğinde ölçeklenmesidir, bu da onu erişilebilirlik için en iyi seçim yapar.

px'i rem'e Dönüştürme

Dönüşüm formülü basittir: piksel değerini kök yazı tipi boyutuna bölün.

rem = px / root-font-size

// With default root font size of 16px:
12px = 12 / 16 = 0.75rem
16px = 16 / 16 = 1rem
24px = 24 / 16 = 1.5rem
32px = 32 / 16 = 2rem
48px = 48 / 16 = 3rem

%62.5 Tekniği

Birçok geliştirici, 16'ya bölme işlemini zahmetli bulur. Popüler bir teknik, kök yazı tipi boyutunu %62.5 olarak ayarlamaktır, böylece 1rem 10px'e eşit olur. Bu, zihinsel hesaplamayı basitleştirir: 14px 1.4rem, 24px 2.4rem olur, vb.

html {
    font-size: 62.5%; /* 1rem = 10px */
}

body {
    font-size: 1.6rem; /* 16px */
}

h1 {
    font-size: 3.2rem; /* 32px */
    margin-bottom: 1.6rem; /* 16px */
}

em: Bağlam Göreli Boyut

em birimi, geçerli öğenin yazı tipi boyutuna (veya font-size dışındaki özellikler için üst öğesine) göredir. Bu, 1em'in geçerli yazı tipi boyutuna eşit olduğu ve em değerlerinin öğeler iç içe yerleştirildiğinde bileşik hale geldiği anlamına gelir. Bu bileşik davranış hem güçlü hem de kafa karıştırıcı olabilir.

Bileşik Sorunu

/* Parent: font-size 16px */
.parent {
    font-size: 1em; /* 16px */
}

/* Child: 1.2em of parent's 16px = 19.2px */
.child {
    font-size: 1.2em;
}

/* Grandchild: 1.2em of child's 19.2px = 23.04px */
.grandchild {
    font-size: 1.2em;
}

Her iç içe öğe, yazı tipi boyutunu çarparak üstel büyümeye yol açar. Bu nedenle rem genellikle yazı tipi boyutları için daha iyidir. Ancak em, bileşen düzeyinde ölçekleme istediğiniz belirli kullanım durumlarında mükemmeldir.

em Ne Zaman Kullanılır

• Bileşen iç boşluğu ve dış boşluğu: Boşluğun bileşen yazı tipi boyutuyla ölçeklenmesini istediğinizde, em her şeyi orantılı tutar. Bir düğmenin yazı tipi boyutunu artırırsanız, iç boşluğu otomatik olarak ölçeklenir.
• Medya sorgusu kesme noktaları: Bazı geliştiriciler, kullanıcı yazı tipi boyutu tercihleriyle ölçeklendikleri ve düzenin uygun içerik genişliğinde uyum sağlamasını garantiledikleri için em tabanlı kesme noktalarını tercih eder.
• Bileşen içindeki simge boyutu: em olarak boyutlandırılan simgeler, çevreleyen metinle orantılı olarak ölçeklenir.

Görünüm Alanı Birimleri: vw, vh, vmin, vmax

Görünüm alanı birimleri, tarayıcı penceresi boyutlarına göredir. 1vw görünüm alanı genişliğinin %1'ine, 1vh görünüm alanı yüksekliğinin %1'ine eşittir. vmin, vw ve vh'den küçük olanıdır, vmax ise büyük olanıdır. Bu birimler, kullanılabilir ekran alanına yanıt veren düzenler oluşturmak için önemlidir.

Yaygın Görünüm Alanı Birimi Kullanım Durumları

Mobil vh Sorunu

Mobil tarayıcılarda, 100vh her zaman görünür görünüm alanı yüksekliğine eşit değildir. Tarayıcının adres çubuğu ve gezinme kontrolleri alan kaplar, ancak 100vh bu kontrollerin arkasındaki alanı içerir. Bu, tam yükseklikli alanların alt kısmındaki içeriğin kesilmesine neden olur. Modern CSS, dinamik araç çubuklarını hesaba katan dvh'yi (dinamik görünüm alanı yüksekliği) çözüm olarak sunar. Alternatif olarak, window.innerHeight tabanlı bir CSS özel özelliği ayarlamak için JavaScript kullanın.

/* Modern approach */
.hero {
    height: 100dvh; /* Dynamic viewport height */
}

/* Fallback for older browsers */
.hero {
    height: 100vh;
    height: 100dvh;
}

Yeni Görünüm Alanı Birimleri: svh, lvh, dvh

CSS, mobil görünüm alanı sorununu çözmek için üç yeni görünüm alanı yükseklik birimi tanıttı:

• svh (Küçük Görünüm Alanı Yüksekliği): Tüm tarayıcı UI'si görünürken görünüm alanı yüksekliği (adres çubuğu açık).
• lvh (Büyük Görünüm Alanı Yüksekliği): Tarayıcı UI'si simge durumuna küçültülmüşken görünüm alanı yüksekliği (adres çubuğu kapalı).
• dvh (Dinamik Görünüm Alanı Yüksekliği): Tarayıcı UI'si açılıp kapanırken değişen geçerli görünüm alanı yüksekliği.

Genişlik (svw, lvw, dvw) ve minimum/maksimum birimler (svmin, lvmin, dvmin, vb.) için aynı küçük/büyük/dinamik varyantlar mevcuttur. Mobil tam ekran düzenler için dvh, içeriğin kaydırma olmadan görüntülenmesini garanti etmeniz gerektiğinde svh, mümkün olan maksimum alanı doldurmak istediğinizde lvh kullanın.

clamp() ile Akışkan Tipografi

CSS clamp() fonksiyonu, duyarlı tipografi için oyunun kurallarını değiştirir. Üç değer alır: minimum değer, tercih edilen değer ve maksimum değer. Tarayıcı tercih edilen değeri seçer, ancak minimum ve maksimum değerler arasında sınırlar.

/* Font size scales from 1rem to 2.5rem based on viewport */
h1 {
    font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem);
}

/* Padding scales proportionally */
.container {
    padding: clamp(1rem, 3vw, 3rem);
}

Bu yaklaşım, metnin mobilde çok küçük veya masaüstünde çok büyük olma riski olmadan görünüm alanı tabanlı ölçeklemenin faydalarını sağlar. Yazı tipi boyutları için medya sorgusu kesme noktalarına olan ihtiyacı ortadan kaldırarak CSS karmaşıklığını önemli ölçüde azaltır.

Dönüşüm Referans Tablosu

Bu tabloyu yaygın dönüşümler için hızlı referans olarak kullanın. Tüm değerler 16px kök yazı tipi boyutu ve 1920x1080 görünüm alanı varsayar.

CSS Birimleri En İyi Uygulamaları

• Yazı tipi boyutları için rem kullanın: Bu en önemli kuraldır. rem tabanlı yazı tipi boyutları kullanıcı tercihlerine saygı duyar ve uygulama genelinde tutarlı bir şekilde ölçeklenir.
• Bileşen boşlukları için em kullanın: Bileşen içindeki iç boşluk ve dış boşluk, bileşen yazı tipi boyutu değiştiğinde orantılı olarak ölçeklendiği için em'den faydalanır.
• Kenarlıklar ve ince ayrıntılar için px kullanın: 1px kenarlıklar ve gölge ofsetleri gibi yazı tipi boyutuyla ölçeklenmemesi gereken değerler piksel kullanmalıdır.
• Düzen genişlikleri için yüzde kullanın: Esnek düzenler, içeriğin farklı ekran boyutlarında yeniden akmasına izin vermek için yüzde tabanlı sütun ve konteyner genişlikleri kullanır.
• Tam ekran öğeler için görünüm alanı birimleri kullanın: Hero bölümleri, katmanlar ve görünüm alanını doldurması gereken her şey vh ve vw'den faydalanır.
• Akışkan tipografi için clamp() kullanın: Minimum ve maksimum değerler arasında düzgün ölçekleme oluşturmak için yazı tipi boyutu medya sorgusu kesme noktalarını clamp() ile değiştirin.
• Kök font-size'ı asla px ile ayarlamayın: Her zaman yüzde (örn. %62.5) kullanın veya tarayıcı varsayılanını koruyun. Piksel olarak ayarlamak, kullanıcının erişilebilirlik tercihlerini geçersiz kılar.
• Tutarlı olun: Projeniz için bir birim stratejisi seçin ve ona bağlı kalın. Birimleri rastgele karıştırmak, kod tabanının bakımını ve hata ayıklamasını zorlaştırır.