PX, REM ve EM Birim Dönüştürücü: Temel CSS Birimleri Açıklandı

CSS Birim Dönüşümüne Giriş

CSS birimlerini anlamak ve bunlar arasında dönüştürmek, duyarlı web tasarımı ve geliştirme için gereklidir. PX (piksel), REM (kök em) ve EM birimleri, farklı cihazlar ve ekran boyutları arasında öğelerin boyutlandırılmasını ve konumlandırılmasını belirleyen temel yapı taşlarıdır. Bu kapsamlı birim dönüştürücü aracı, bu üç kritik CSS birimi arasında değerleri kolayca çevirmeyi sağlar ve daha esnek ve sürdürülebilir web düzenleri oluşturmanıza yardımcı olur.

Pikseller (PX), kesin kontrol sağlarken ölçeklenebilirlikten yoksun sabit boyutlu birimlerdir; REM birimleri kök öğenin yazı tipi boyutuna göre ölçeklenirken, EM birimleri ebeveyn öğenin yazı tipi boyutuna göre ölçeklenir. Bu birimler arasında dönüştürmek, karmaşık tasarımlar üzerinde çalışırken veya metin boyutlandırma gibi erişilebilirlik özelliklerini desteklerken zor olabilir. PX, REM ve EM dönüştürücümüz bu süreci basitleştirir, böylece güzel, duyarlı tasarımlar oluşturmanıza odaklanabilirsiniz.

CSS Birimlerini Anlamak: PX, REM ve EM

Pikseller (PX) Nedir?

Pikseller (PX), en temel ve yaygın olarak kullanılan CSS birimidir. Bir piksel, dijital bir görüntü ızgarasında tek bir noktadır ve ekrandaki en küçük kontrol edilebilir öğeyi temsil eder. CSS'de pikseller, diğer stil faktörlerinden bağımsız olarak tutarlı kalan sabit boyutlu bir ölçü birimi sağlar.

1.element {
2  width: 200px;
3  font-size: 16px;
4  margin: 10px;
5}
6

Piksellerin ana özellikleri:

Otomatik olarak ölçeklenmeyen sabit boyutlu birimler
Öğelerin boyutları üzerinde kesin kontrol sağlar
Anlaşılması ve görselleştirilmesi kolaydır
Duyarlı tasarım ve erişilebilirlik için ideal değildir

REM Birimleri Nedir?

REM (kök em) birimleri, kök öğenin yazı tipi boyutuna (genellikle <html> öğesi) göre ölçeklenen göreceli birimlerdir. Çoğu tarayıcıda varsayılan kök yazı tipi boyutu 16px olarak ayarlandığından, 1rem varsayılan olarak 16px'e eşittir.

1html {
2  font-size: 16px; /* Çoğu tarayıcıda varsayılan */
3}
4
5.element {
6  width: 12.5rem; /* Varsayılan kök yazı tipi boyutuyla 200px'e eşdeğer */
7  font-size: 1rem; /* 16px'e eşdeğer */
8  margin: 0.625rem; /* 10px'e eşdeğer */
9}
10

REM birimlerinin ana özellikleri:

Kök öğenin yazı tipi boyutuna göre ölçeklenir
Belge boyunca tutarlı oranlar korur
Küresel yazı tipi boyutu ayarlamalarıyla daha iyi erişilebilirlik destekler
Duyarlı düzenler ve tipografi için idealdir

EM Birimleri Nedir?

EM birimleri, ebeveyn öğenin yazı tipi boyutuna göre ölçeklenen göreceli birimlerdir. Ebeveyn için yazı tipi boyutu belirtilmezse, EM'ler miras alınan yazı tipi boyutuna referans verir.

1.parent {
2  font-size: 20px;
3}
4
5.child {
6  font-size: 0.8em; /* 16px'e (20px × 0.8) eşdeğer */
7  margin: 0.5em; /* 8px'e (16px × 0.5) eşdeğer */
8}
9

EM birimlerinin ana özellikleri:

Ebeveyn öğenin yazı tipi boyutuna göre ölçeklenir
İç içe geçmiş öğelerde bir kaskad etkisi yaratır
Bileşenler içinde orantılı tasarımlar oluşturmak için kullanışlıdır
Derinlemesine iç içe geçmiş öğelerle yönetimi karmaşık hale gelebilir

Dönüşüm Formülleri ve Hesaplamalar

PX, REM ve EM birimleri arasındaki matematiksel ilişkileri anlamak, doğru dönüşümler için kritik öneme sahiptir. İşte dönüştürücümüzde kullanılan formüller:

PX'den REM'e Dönüşüm

Pikselleri REM birimlerine dönüştürmek için, piksel değerini kök yazı tipi boyutuna bölün:

$REM = \frac{PX}{rootFontSize}$

Örneğin, varsayılan kök yazı tipi boyutu 16px ile:

16px = 1rem
24px = 1.5rem
8px = 0.5rem

PX'den EM'e Dönüşüm

Pikselleri EM birimlerine dönüştürmek için, piksel değerini ebeveyn öğenin yazı tipi boyutuna bölün:

$EM = \frac{PX}{parentFontSize}$

Örneğin, ebeveyn yazı tipi boyutu 16px ile:

16px = 1em
24px = 1.5em
8px = 0.5em

REM'den PX'e Dönüşüm

REM birimlerini piksellere dönüştürmek için, REM değerini kök yazı tipi boyutu ile çarpın:

$PX = REM \times rootFontSize$

Örneğin, varsayılan kök yazı tipi boyutu 16px ile:

1rem = 16px
1.5rem = 24px
0.5rem = 8px

EM'den PX'e Dönüşüm

EM birimlerini piksellere dönüştürmek için, EM değerini ebeveyn öğenin yazı tipi boyutu ile çarpın:

$PX = EM \times parentFontSize$

Örneğin, ebeveyn yazı tipi boyutu 16px ile:

1em = 16px
1.5em = 24px
0.5em = 8px

REM'den EM'e Dönüşüm

REM birimlerini EM birimlerine dönüştürmek için, hem kök yazı tipi boyutunu hem de ebeveyn öğenin yazı tipi boyutunu dikkate almanız gerekir:

$EM = REM \times \frac{rootFontSize}{parentFontSize}$

Eğer hem kök hem de ebeveyn yazı tipi boyutları aynıysa (örneğin, 16px), o zaman 1rem = 1em olur.

EM'den REM'e Dönüşüm

EM birimlerini REM birimlerine dönüştürmek için, aşağıdaki formülü kullanın:

$REM = EM \times \frac{parentFontSize}{rootFontSize}$

Yine, eğer her iki yazı tipi boyutu eşitse, o zaman 1em = 1rem olur.

PX, REM ve EM Birim Dönüştürücüsünü Kullanma

Birimi dönüştürücü aracımız, PX, REM ve EM birimleri arasında değerleri çevirmeyi kolaylaştırır. İşte dönüştürücüyü etkili bir şekilde kullanmak için adım adım bir rehber:

Temel Kullanım

Herhangi bir giriş alanına bir değer girin (PX, REM veya EM)
Dönüştürücü, otomatik olarak hesaplayacak ve diğer iki birimde eşdeğer değerleri gösterecektir
Kök yazı tipi boyutunu ayarlayın (varsayılan: 16px) ve bunun REM dönüşümlerini nasıl etkilediğini görün
Ebeveyn yazı tipi boyutunu ayarlayın (varsayılan: 16px) ve bunun EM dönüşümlerini nasıl etkilediğini görün
Her alandaki değeri panonuza kopyalamak için yanındaki kopyala düğmesini kullanın

Gelişmiş Özellikler

Görsel karşılaştırma: Araç, her bir birimin göreceli boyutlarının görsel temsilini sağlar
Hassasiyet kontrolü: Tüm hesaplamalar, doğruluk için 4 ondalık basamak korur
Negatif değerler: Dönüştürücü, CSS'de kenar boşlukları gibi özellikler için geçerli olan negatif değerleri destekler
Gerçek zamanlı güncellemeler: Giriş değerlerinde veya yazı tipi boyutu ayarlarında yapılan herhangi bir değişiklik, tüm hesaplamaları anında günceller

Doğru Dönüşümler İçin İpuçları

En doğru REM dönüşümleri için, kök yazı tipi boyutunu projenizin <html> yazı tipi boyutu değerine eşit olacak şekilde ayarlayın
Doğru EM dönüşümleri için, ebeveyn yazı tipi boyutunu çalıştığınız ebeveyn öğenin yazı tipi boyutuna eşit olacak şekilde ayarlayın
Tarayıcı varsayılan yazı tipi boyutlarının değişebileceğini unutmayın, ancak 16px en yaygın varsayılan olarak kabul edilir

CSS Birim Dönüşümünün Pratik Kullanım Durumları

Her bir CSS birimini ne zaman kullanacağınızı ve bunlar arasında nasıl dönüştüreceğinizi anlamak, etkili web geliştirme için kritik öneme sahiptir. İşte birim dönüştürücümüzün değerli olduğu bazı pratik uygulamalar ve senaryolar:

Duyarlı Web Tasarımı

Birimler arasında dönüştürmek, gerçekten duyarlı tasarımlar oluşturmak için gereklidir:

Mobil öncelikli yaklaşım: Piksel cinsinden bir temel tasarımla başlayın, ardından ölçeklenebilirlik için göreceli birimlere dönüştürün
Kırılma noktası yönetimi: Farklı görünüm boyutları arasında tutarlı boşluklar için REM'leri kullanın
Bileşen ölçeklendirme: Görünüm değiştiğinde UI öğelerinin orantılı ilişkilerini koruyun

1/* Sabit piksel değerlerini duyarlı REM birimlerine dönüştürün */
2.container {
3  /* Önce: padding: 20px; */
4  padding: 1.25rem; /* 20px ÷ 16px = 1.25rem */
5  
6  /* Önce: margin-bottom: 32px; */
7  margin-bottom: 2rem; /* 32px ÷ 16px = 2rem */
8}
9

Erişilebilirlik Geliştirmeleri

Göreceli birimlerin kullanımı, kullanıcı tercihlerini dikkate alarak erişilebilirliği artırır:

Metin boyutu değiştirme: Kullanıcılar tarayıcılarının yazı boyutunu değiştirdiğinde, REM tabanlı düzenler uygun şekilde uyum sağlar
Zoom işlevselliği: Göreceli birimler, kullanıcılar yakınlaştırdığında tasarımların orantılı kalmasını sağlar
Kullanıcı tercihlerini saygı gösterme: Göreceli birimlere dayalı düzenler, kullanıcının varsayılan yazı tipi boyutu ayarlarını dikkate alır

Bileşen Tabanlı Tasarım Sistemleri

Modern tasarım sistemleri, düşünceli birim kullanımından faydalanır:

Tutarlı bileşenler: Küresel boşluk ve boyut tutarlılığı için REM kullanın
Kendi kendine yeterli modüller: Ebeveyn bileşenleriyle ölçeklenmesi gereken öğeler için EM kullanın
Tasarım tokenları: Farklı bağlamlar arasında tasarım tokenlarını uygularken birimler arasında dönüştürün

Tipografi Sistemleri

Harmonik tipografi oluşturmak, dikkatli bir birim seçimi gerektirir:

Yazı ölçekleri: Tutarlı ilerleme için REM'lerde bir tipografik ölçek tanımlayın
Satır yükseklikleri: Orantılı satır yükseklikleri için birim olmayan değerler veya EM'ler kullanın
Duyarlı metin: Kırılma noktaları arasında yazı boyutlarını ayarlarken oranları koruyun

1/* REM birimleri kullanarak tipografi sistemi */
2h1 { font-size: 2.5rem; }    /* 40px */
3h2 { font-size: 2rem; }      /* 32px */
4h3 { font-size: 1.5rem; }    /* 24px */
5h4 { font-size: 1.25rem; }   /* 20px */
6p { font-size: 1rem; }       /* 16px */
7small { font-size: 0.875rem; } /* 14px */
8

Piksel Mükemmelliği Tasarımları

Figma veya Photoshop gibi araçlardan tasarımlar uygularken:

Tasarım teslimi: Tasarım dosyalarındaki piksel değerlerini REM/EM'ye dönüştürün
Kesinlik sağlama: Göreceli birimler kullanırken kesin boşluk ve boyutları koruyun
Tasarım sistemi entegrasyonu: Piksel tabanlı tasarım tokenlarını göreceli birimlere çevirin

Alternatif CSS Birimleri

PX, REM ve EM en yaygın birimler olsa da, dikkate alınması gereken alternatifler vardır:

Görünüm Birimleri (VW, VH)

VW (görünüm genişliği): 1vw, görünüm genişliğinin %1'ine eşittir
VH (görünüm yüksekliği): 1vh, görünüm yüksekliğinin %1'ine eşittir
Kullanım durumu: Görünüm boyutuyla doğrudan ölçeklenen öğeler oluşturmak

Yüzde (%)

Ebeveyn öğenin boyutlarına göre göreceli
Kullanım durumu: Akışkan düzenler ve duyarlı genişlikler

CH Birimleri

"0" karakterinin genişliğine dayanır
Kullanım durumu: Her satırda belirli bir karakter sayısı olan konteynerler oluşturmak

EX Birimleri

Küçük "x" karakterinin yüksekliğine dayanır
Kullanım durumu: Tipografiyi ince ayar yapmak, özellikle x-yüksekliği ayarlamaları için

Web Geliştirmedeki CSS Birimlerinin Evrimi

CSS birimlerinin tarihi, sabit düzenlerden günümüzün duyarlı, erişilebilir yaklaşımlarına geçişi yansıtır.

Erken Web Tasarımı (1990'lar)

CSS'in ilk günlerinde pikseller egemendi. Web tasarımcıları, genellikle 640px veya 800px genişliğinde sabit genişlikli düzenler oluşturuyordu. Erişilebilirlik ve cihaz çeşitliliği büyük endişeler değildi ve piksel mükemmelliği ana hedefti.

Akışkan Düzenlerin Yükselişi (2000'lerin Başları)

Ekran boyutları çeşitlendikçe, yüzde tabanlı düzenler popülarite kazandı. Tasarımcılar daha esnek tasarımlar oluşturmaya başladı, ancak tipografi genellikle piksel birimlerinde kaldı. Bu dönemde CSS'de EM birimlerinin tanıtımı yapıldı, ancak karmaşık yazı tipi boyutları yönetimi nedeniyle benimsenmesi sınırlıydı.

Mobil Devrim (2007-2010)

2007'de iPhone'un tanıtımı, web tasarımını dönüştürdü. Aniden, web sitelerinin 320px genişliğinde ekranlarda çalışması gerekiyordu. Bu, duyarlı tasarım tekniklerine olan ilgiyi artırdı ve göreceli birimlere olan talep arttı. EM birimlerinin sınırlamaları (özellikle kaskad etkisi) karmaşık tasarımlar haline geldikçe daha belirgin hale geldi.

Duyarlı Web Tasarımı Dönemi (2010-2015)

Ethan Marcotte'un 2010'daki duyarlı web tasarımı konusundaki etkili makalesi, geliştiricilerin CSS birimlerine yaklaşımını değiştirdi. REM birimi, EM birimlerinin karmaşık etkileri olmadan göreceli ölçeklenmenin faydalarını sunarak CSS3'te tanıtıldı. Bu dönemde REM birimleri için tarayıcı desteği giderek arttı.

Modern CSS Yaklaşımları (2015-Günümüz)

Günümüz web geliştirmesi, farklı amaçlar için birimlerin bir karışımını benimsemektedir:

Küresel tutarlılık ve erişilebilirlik için REM birimleri
Bileşen tabanlı ölçekleme için EM birimleri
Kenar boşlukları ve küçük detaylar için pikseller
Gerçekten duyarlı öğeler için görünüm birimleri
Farklı birim türlerini birleştirmek için CSS calc() fonksiyonu

Bu evrim, webin bir belge tabanlı ortamdan, sayısız cihaz ve bağlamda çalışması gereken karmaşık bir uygulama platformuna geçişini yansıtır.

Birim Dönüşümü İçin Kod Örnekleri

JavaScript Birim Dönüştürücü Fonksiyonları

1// PX, REM ve EM birimleri arasında dönüşüm yapın
2const pxToRem = (px, rootFontSize = 16) => {
3  return px / rootFontSize;
4};
5
6const pxToEm = (px, parentFontSize = 16) => {
7  return px / parentFontSize;
8};
9
10const remToPx = (rem, rootFontSize = 16) => {
11  return rem * rootFontSize;
12};
13
14const emToPx = (em, parentFontSize = 16) => {
15  return em * parentFontSize;
16};
17
18const remToEm = (rem, rootFontSize = 16, parentFontSize = 16) => {
19  return rem * (rootFontSize / parentFontSize);
20};
21
22const emToRem = (em, parentFontSize = 16, rootFontSize = 16) => {
23  return em * (parentFontSize / rootFontSize);
24};
25
26// Örnek kullanım
27console.log(pxToRem(24));  // 1.5
28console.log(remToPx(1.5)); // 24
29console.log(pxToEm(24, 24)); // 1
30console.log(remToEm(2, 16, 32)); // 1
31

CSS Özel Özellikleri ile Birim Dönüşümü

1:root {
2  /* Temel yazı boyutları */
3  --root-font-size: 16px;
4  --base-font-size: var(--root-font-size);
5  
6  /* REM'e dönüştürülmüş yaygın piksel değerleri */
7  --space-4px: 0.25rem;
8  --space-8px: 0.5rem;
9  --space-16px: 1rem;
10  --space-24px: 1.5rem;
11  --space-32px: 2rem;
12  --space-48px: 3rem;
13  
14  /* Tipografi ölçeği */
15  --text-xs: 0.75rem;    /* 12px */
16  --text-sm: 0.875rem;   /* 14px */
17  --text-base: 1rem;     /* 16px */
18  --text-lg: 1.125rem;   /* 18px */
19  --text-xl: 1.25rem;    /* 20px */
20  --text-2xl: 1.5rem;    /* 24px */
21}
22
23/* Kullanım örneği */
24.card {
25  padding: var(--space-16px);
26  margin-bottom: var(--space-24px);
27  font-size: var(--text-base);
28}
29
30.card-title {
31  font-size: var(--text-xl);
32  margin-bottom: var(--space-8px);
33}
34

SCSS Karışımları ile Birim Dönüşümü

1// SCSS fonksiyonları birim dönüşümü için
2@function px-to-rem($px, $root-font-size: 16) {
3  @return ($px / $root-font-size) * 1rem;
4}
5
6@function px-to-em($px, $parent-font-size: 16) {
7  @return ($px / $parent-font-size) * 1em;
8}
9
10@function rem-to-px($rem, $root-font-size: 16) {
11  @return $rem * $root-font-size * 1px;
12}
13
14// Kullanım örneği
15.element {
16  padding: px-to-rem(20);
17  margin: px-to-rem(32);
18  font-size: px-to-rem(18);
19  
20  .nested {
21    // Ebeveyn yazı boyutu (18px) için em dönüşümü
22    padding: px-to-em(16, 18);
23    margin-bottom: px-to-em(24, 18);
24  }
25}
26

Python Birim Dönüştürücü

1def px_to_rem(px, root_font_size=16):
2    """Pikselleri REM birimlerine dönüştürün"""
3    return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6    """REM birimlerini piksellere dönüştürün"""
7    return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10    """Pikselleri EM birimlerine dönüştürün"""
11    return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14    """EM birimlerini piksellere dönüştürün"""
15    return em * parent_font_size
16
17# Örnek kullanım
18print(f"16px = {px_to_rem(16)}rem")  # 16px = 1.0rem
19print(f"2rem = {rem_to_px(2)}px")    # 2rem = 32px
20print(f"24px = {px_to_em(24, 16)}em")  # 24px = 1.5em
21

Sıkça Sorulan Sorular

REM ve EM birimleri arasındaki fark nedir?

REM (kök em) birimleri, kök öğenin yazı tipi boyutuna (genellikle <html> öğesi) göre görecelidir; EM birimleri ise ebeveyn öğenin yazı tipi boyutuna göre görecelidir. Bu temel fark, REM birimlerinin iç içe geçişte tutarlı boyutlandırma sağlaması, EM birimlerinin ise iç içe geçmiş öğelerde kaskad etkisi yaratması anlamına gelir.

Duyarlı tasarım için en iyi CSS birimi hangisidir?

Her durum için tek bir "en iyi" birim yoktur. Genellikle birimlerin bir kombinasyonu en etkili olanıdır:

Tipografi ve tutarlı boşluklar için REM birimleri
Bileşenlere özgü ölçekleme için EM birimleri
Düzen genişlikleri için yüzde veya görünüm birimleri
Kenar boşlukları ve küçük detaylar için pikseller

En ideal yaklaşım, her birimi en iyi şekilde kullanarak uyumlu bir sistem oluşturmaktır.

Tarayıcılar neden 16px yazı boyutunu varsayılan olarak ayarlıyor?

16px varsayılanı, okunabilirlik standardı olarak belirlenmiştir ve çoğu cihazda iyi çalışır. Araştırmalar, 16px civarındaki metnin tipik görüntüleme mesafelerinde okunabilirlik için optimal olduğunu göstermiştir. Bu varsayılan, erişilebilirlik için de iyi bir temel sağlar ve metinlerin çoğu kullanıcı için çok küçük olmamasını garanti eder.

Bu birimlerle negatif değerler kullanabilir miyim?

Evet, CSS birçok özellik için herhangi bir birim türü ile negatif değerleri destekler. Negatif kenar boşlukları, dönüşümler ve konumlar, geçerli kullanım durumlarıdır. Dönüştürücümüz, tüm birim türleri için negatif değerleri doğru bir şekilde işler.

Medya sorgularında REM veya EM birimlerini nasıl kullanmalıyım?

Medya sorgularında REM ve EM birimlerinin desteklenmesi önemli ölçüde artmıştır. Medya sorgularında EM birimlerinin kullanılması genellikle önerilir çünkü:

Tarayıcının varsayılan yazı boyutuna göre görecelidir
Kullanıcının yazı boyutu tercihlerini dikkate alır
Tarayıcılar arasında tutarlı kırılma noktaları sağlar

1/* Medya sorgularında EM birimlerini kullanma */
2@media (min-width: 48em) {  /* 16px temel ile 768px */
3  /* Tablet stilleri */
4}
5
6@media (min-width: 64em) {  /* 16px temel ile 1024px */
7  /* Masaüstü stilleri */
8}
9

Tasarım araçları (Figma veya Sketch gibi) ile birimler arasında nasıl dönüşüm yapabilirim?

Çoğu tasarım aracı esas olarak piksellerle çalışır. Tasarımları uygularken:

Projenizin kök yazı tipi boyutunu not edin (genellikle 16px)
Piksel değerlerini kök yazı tipi boyutuna bölerek REM değerlerini elde edin
EM değerleri için ebeveyn öğenin yazı tipi boyutuna bölün
Yaygın değerler için tasarım tokenları veya değişkenler oluşturmayı düşünün

Bazı tasarım araçları, bu dönüşüm sürecini otomatik olarak yardımcı olabilecek eklentilere sahiptir.

Yüksek DPI (Retina) ekranlarda CSS birimleri nasıl işlenir?

Yüksek DPI ekranlar, göreceli birimler kullanıldığında otomatik olarak işlenir. Bu birimler, fiziksel piksel yerine yazı tipi boyutuna dayandığından, yüksek çözünürlüklü ekranlarda uygun şekilde ölçeklenir. Görseller ve kenar boşlukları için, medya sorgularını cihaz piksel oranı veya çözünürlük ile kullanmayı düşünün.

Farklı CSS birimlerinin performans etkisi nedir?

Modern tarayıcılarda piksel, REM veya EM birimleri kullanımı arasında önemli bir performans farkı yoktur. Birimlerin seçimi, tasarım gereksinimleri, duyarlı davranış ve erişilebilirlik ihtiyaçları temelinde yapılmalıdır; performans dikkate alınmamalıdır.

Referanslar ve Daha Fazla Okuma

"CSS Values and Units Module Level 3." W3C Recommendation. https://www.w3.org/TR/css-values-3/
Marcotte, Ethan. "Responsive Web Design." A List Apart, May 25, 2010. https://alistapart.com/article/responsive-web-design/
Rutter, Richard. "The Elements of Typographic Style Applied to the Web." http://webtypography.net/
"CSS Units." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
"CSS Pixels vs. Physical Pixels." Stack Overflow Documentation. https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels
Coyier, Chris. "The Lengths of CSS." CSS-Tricks. https://css-tricks.com/the-lengths-of-css/
"Using CSS custom properties (variables)." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
"Understanding and Using rem Units in CSS." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

Bugün Birim Dönüştürücümüzü Deneyin

Manuel CSS birim dönüşümleriyle mücadele etmeyi bırakın ve PX, REM ve EM Birim Dönüştürücümüzün işinizi görmesine izin verin. İster duyarlı bir web sitesi oluşturuyor olun, ister bir tasarım sistemi geliştiriyor olun, ister CSS birimleri hakkında öğreniyor olun, bu araç size zaman kazandıracak ve doğruluğu sağlacaktır. Değerlerinizi şimdi girin ve birim dönüşümünün ne kadar kolay olabileceğini görün!

PX'den REM'e ve EM'e Dönüştürücü: CSS Birimleri Hesaplayıcı

PX, REM ve EM Birim Dönüştürücü

Dönüşüm Formülleri

Dokümantasyon