Piksel (PX), en basit CSS birimidir—belirttiğiniz tam olarak budur. CSS pikseli, fiziksel ekran pikseli olmak zorunda değildir (özellikle Retina ekranlar gibi yüksek DPI ekranlarda). Yazı tipi boyutları veya üst öğelere bağlı olarak değişmeyen sabit boyutlandırma sağlarlar. Piksellerin iyi çalıştığı durumlar: Kenarlıklar ve ayırıcılar (1px veya 2px kenarlıklar net kalır) Ölçeklendirilmemesi gereken küçük, kesin detaylar Kesin boyutlar gereken sabit genişlikte konteynerler Piksel mükemmel sprite sayfalarıyla çalışırken simge boyutları Dezavantaj: Piksel, kullanıcı tercihlerini dikkate almaz. Birisi tarayıcının varsayılan yazı tipi boyutunu daha iyi okunabilirlik için 16px'den 20px'e çıkarırsa, piksel tabanlı düzenler değişmez, bu da metinin taşmasına veya sıkışık boşluklara neden olabilir.

REM (kök em) birimleri, kök elemanın yazı tipi boyutuna göre ölçeklendirilir—genellikle elemanı. Çoğu tarayıcı varsayılan olarak 16px kullanır, dolayısıyla kök yazı tipi boyutunu değiştirmediğiniz sürece 1rem 16px'e eşittir. REM'leri güçlü kılan şey: sitenizin tamamında tutarlı, öngörülebilir ölçeklendirme sağlamalarıdır. Geliştiricilerin REM birimlerini tercih etme nedenleri: Tutarlı ölçeklendirme: Kök yazı tipi boyutunu değiştirin, her şey orantılı olarak ölçeklensin Erişilebilirlik uyumluluğu: Kullanıcılar tarayıcı yazı tipi boyutunu ayarladığında, REM tabanlı düzenler otomatik olarak uyum sağlar Daha kolay bakım: Boşluk değerlerini tek bir yerden güncelleyin Birikim sorunu yok: EM birimlerinin aksine, REM'ler iç içe geçmiş elemanlarda birikmez Deneyimden gelen ipucu: Kök yazı tipi boyutunu %62.5 olarak ayarlayın (varsayılan 16px ile 1rem = 10px yapar). Bu, zihinsel hesaplamayı kolaylaştırır—1.6rem = 16px, 2.4rem = 24px. Sadece body yazı tipi boyutunu tekrar 1.6rem olarak ayarlamayı unutmayın ki metin varsayılan olarak 16px olsun. W3C CSS Değerler ve Birimler belirtiminde belirtildiği gibi, REM birimleri her zaman kök elemanı referans alır, bu da karmaşık düzenlerde öngörülebilir olmalarını sağlar.

EM birimleri, üst elemanın yazı tipi boyutuna göre ölçeklendirilir, bu onları bağlam farkında kılar. Bu davranış, her zaman kökü referans alan REM birimlerinden farklıdır. "Em" adı tipografiden gelir—tarihsel olarak belirli bir yazı tipinde büyük "M" harfinin genişliğini ifade ederdi. EM birimlerinin öne çıktığı durumlar: Bileşen tabanlı tasarım: Yazı tipi boyutuyla ölçeklenen dolgu ve kenar boşlukları Tipografi: Birimsiz değerler veya em'lerle iyi çalışan satır yükseklikleri (örn. line-height: 1.5em) Kendine özgü modüller: Yazı tipi boyutu değiştiğinde oranlarını koruyan düğmeler veya kartlar Medya sorguları: MDN Web Docs'a göre, medya sorgularındaki EM birimleri üst elemanın değil, tarayıcının varsayılan yazı tipi boyutunu referans alır Birikim tuzağı: Geliştiricilerin sıklıkla takıldığı nokta budur. EM birimleri iç içe geçmiş elemanlarda birikir, bu da beklenmedik sonuçlara yol açabilir: Üç seviye iç içe geçmeden sonra, metniniz %20 yerine %73 büyümüş olur. İşte bu yüzden birçok geliştirici, tarayıcı desteği iyileşince tipografide REM birimlerine geçti.

PX'den REM'e ve EM'e Dönüştürücü – Ücretsiz CSS Birim Hesaplayıcı

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

Modern Web Geliştirmede CSS Birim Dönüşümünün Önemi

Responsive web siteleri inşa ederken, en yaygın zorluklardan biri tasarım özelliklerini esnek ve ölçeklenebilir CSS'e çevirmektir. Muhtemelen "padding: 24px" yazan bir Figma tasarımı gördünüz ve bunun piksel olarak mı kalması gerektiğini yoksa rem birimine mi dönüştürülmesi gerektiğini merak etmişsinizdir. Bu karar, erişilebilirlikten kullanıcıların tarayıcı yazı tipi boyutunu ayarladığında düzeninizin nasıl tepki vereceğine kadar her şeyi etkiler.

Bu PX, REM ve EM birim dönüştürücü, bu üç temel CSS birimini hızlıca çevirmenize yardımcı olur. Pikseller size kesin kontrol sağlar—kenarlıklar ve ince detaylar için harikadır. REM birimleri kök yazı tipi boyutuyla ölçeklenir, bu da onları tüm sitenizde tutarlı boşluk ve tipografik düzen için ideal kılar. EM birimleri üst öğesine göre ölçeklenir, orantılarını koruyan kendine özgü bileşenler oluşturmak için mükemmeldir.

Zor olan kısım? Aralarında dönüşüm yaparken kök öğe ve bireysel bileşenler arasında değişen yazı tipi boyutlarını hesaba katmanız gerekir. Geliştiricilerin sıkça yaptığı yaygın bir hata, her yerde pikselleri kullanmaktır çünkü bu daha basit görünür. Bu başlangıçta işe yarar, ancak kullanıcılar tarayıcılarının varsayılan yazı tipi boyutunu artırdığında erişilebilirlik sorunları yaratır—düzen orantılı olarak uyum sağlamaz.

CSS Birimlerini Anlamak: PX, REM ve EM

Piksel (PX) Nedir?

Piksel (PX), en basit CSS birimidir—belirttiğiniz tam olarak budur. CSS pikseli, fiziksel ekran pikseli olmak zorunda değildir (özellikle Retina ekranlar gibi yüksek DPI ekranlarda). Yazı tipi boyutları veya üst öğelere bağlı olarak değişmeyen sabit boyutlandırma sağlarlar.

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

Piksellerin iyi çalıştığı durumlar:

Kenarlıklar ve ayırıcılar (1px veya 2px kenarlıklar net kalır)
Ölçeklendirilmemesi gereken küçük, kesin detaylar
Kesin boyutlar gereken sabit genişlikte konteynerler
Piksel mükemmel sprite sayfalarıyla çalışırken simge boyutları

Dezavantaj: Piksel, kullanıcı tercihlerini dikkate almaz. Birisi tarayıcının varsayılan yazı tipi boyutunu daha iyi okunabilirlik için 16px'den 20px'e çıkarırsa, piksel tabanlı düzenler değişmez, bu da metinin taşmasına veya sıkışık boşluklara neden olabilir.

REM Birimleri Nedir?

REM (kök em) birimleri, kök elemanın yazı tipi boyutuna göre ölçeklendirilir—genellikle <html> elemanı. Çoğu tarayıcı varsayılan olarak 16px kullanır, dolayısıyla kök yazı tipi boyutunu değiştirmediğiniz sürece 1rem 16px'e eşittir. REM'leri güçlü kılan şey: sitenizin tamamında tutarlı, öngörülebilir ölçeklendirme sağlamalarıdır.

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

Geliştiricilerin REM birimlerini tercih etme nedenleri:

Tutarlı ölçeklendirme: Kök yazı tipi boyutunu değiştirin, her şey orantılı olarak ölçeklensin
Erişilebilirlik uyumluluğu: Kullanıcılar tarayıcı yazı tipi boyutunu ayarladığında, REM tabanlı düzenler otomatik olarak uyum sağlar
Daha kolay bakım: Boşluk değerlerini tek bir yerden güncelleyin
Birikim sorunu yok: EM birimlerinin aksine, REM'ler iç içe geçmiş elemanlarda birikmez

Deneyimden gelen ipucu: Kök yazı tipi boyutunu %62.5 olarak ayarlayın (varsayılan 16px ile 1rem = 10px yapar). Bu, zihinsel hesaplamayı kolaylaştırır—1.6rem = 16px, 2.4rem = 24px. Sadece body yazı tipi boyutunu tekrar 1.6rem olarak ayarlamayı unutmayın ki metin varsayılan olarak 16px olsun. W3C CSS Değerler ve Birimler belirtiminde belirtildiği gibi, REM birimleri her zaman kök elemanı referans alır, bu da karmaşık düzenlerde öngörülebilir olmalarını sağlar.

EM Birimleri Nedir?

EM birimleri, üst elemanın yazı tipi boyutuna göre ölçeklendirilir, bu onları bağlam farkında kılar. Bu davranış, her zaman kökü referans alan REM birimlerinden farklıdır. "Em" adı tipografiden gelir—tarihsel olarak belirli bir yazı tipinde büyük "M" harfinin genişliğini ifade ederdi.

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

EM birimlerinin öne çıktığı durumlar:

Bileşen tabanlı tasarım: Yazı tipi boyutuyla ölçeklenen dolgu ve kenar boşlukları
Tipografi: Birimsiz değerler veya em'lerle iyi çalışan satır yükseklikleri (örn. line-height: 1.5em)
Kendine özgü modüller: Yazı tipi boyutu değiştiğinde oranlarını koruyan düğmeler veya kartlar
Medya sorguları: MDN Web Docs'a göre, medya sorgularındaki EM birimleri üst elemanın değil, tarayıcının varsayılan yazı tipi boyutunu referans alır

Birikim tuzağı: Geliştiricilerin sıklıkla takıldığı nokta budur. EM birimleri iç içe geçmiş elemanlarda birikir, bu da beklenmedik sonuçlara yol açabilir:

1.level-1 { font-size: 1.2em; }  /* Üst eleman 16px ise 19.2px */
2.level-2 { font-size: 1.2em; }  /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; }  /* 27.65px (23.04px × 1.2) */
4

Üç seviye iç içe geçmeden sonra, metniniz %20 yerine %73 büyümüş olur. İşte bu yüzden birçok geliştirici, tarayıcı desteği iyileşince tipografide REM birimlerine geçti.

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

PX, REM ve EM birimler arasındaki matematiksel ilişkileri anlamak, doğru dönüşümler için çok önemlidir. İş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 ise:

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 üst öğenin yazı tipi boyutuna bölün:

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

Örneğin, üst öğe yazı tipi boyutu 16px ise:

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 boyutuyla çarpın:

$PX = REM \times rootFontSize$

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

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 üst öğenin yazı tipi boyutuyla çarpın:

$PX = EM \times parentFontSize$

Örneğin, üst öğe yazı tipi boyutu 16px ise:

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 üst öğenin yazı tipi boyutunu hesaba katmanız gerekir:

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

Eğer kök ve üst öğe yazı tipi boyutları aynı ise (örn. 16px), o zaman 1rem = 1em.

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, her iki yazı tipi boyutu da eşit ise, 1em = 1rem.

PX'den REM'e ve EM'e Birim Dönüştürücü Nasıl Kullanılır

Doğru dönüşümleri elde etmek bu araçla oldukça basittir. Anahtar, belirli durumunuz için hangi yazı tipi boyutlarını kullanacağınızı anlamaktır.

Hızlı Başlangıç Kılavuzu

Herhangi bir alanda değerinizi girin—piksel, REM veya EM
Sonuçları anında kontrol edin diğer iki birimde
Yazı tipi boyutlarını ayarlayın projenize uygun olarak:
- Kök yazı tipi boyutu: <html> öğenizde ayarladığınız boyut (genellikle 16px)
- Üst öğe yazı tifi boyutu: Belirli öğenin üst öğesinin yazı tifi boyutu (yine tipik olarak 16px)
İhtiyacınız olan değeri kopyalama butonunu kullanarak kopyalayın

Projeniz İçin Doğru Sonuçları Elde Etme

Dönüştürücü varsayılan olarak hem kök hem de üst öğe yazı tipi boyutunu 16px olarak ayarlar, çünkü bu tarayıcı standardıdır. Ancak önemli olan: projeniz farklı değerler kullanıyor olabilir.

Kök yazı tifi boyutunuzu bulma: Tarayıcınızın geliştirici araçlarını açın, <html> öğesini inceleyin ve hesaplanan yazı tipi boyutunu kontrol edin. html { font-size: 62.5%; } ayarladıysanız, kök yazı tifi boyutunuz 10px (16px'in %62.5'i) olacaktır.

Üst öğe yazı tifi boyutunu bulma: EM dönüşümleri için, stili uyguladığınız belirli üst öğenin yazı tifi boyutuna ihtiyacınız vardır. Geliştirici araçlarında o öğeyi inceleyerek hesaplanan yazı tifi boyutunu görün. Üst öğe font-size: 1.2rem ise ve kök 16px ise, doğru EM hesaplamaları için üst öğe yazı tifi boyutunu 19.2px olarak ayarlayın.

Yaygın Dönüşüm Senaryoları

Tasarımdan koda: Figma dosyanızda padding: 24px görünüyor. Daha iyi erişilebilirlik için REM birimleri kullanmak istiyorsunuz. PX alanına 24 girin ve (16px kök varsayılarak) 1.5rem olduğunu görün.

Buton bileşeni oluşturma: Dolguyu butonun yazı tifi boyutuyla ölçeklendirmek istiyorsunuz. Butonun font-size: 1.125rem (18px) ise, üst öğe yazı tifi boyutunu 18 olarak ayarlayın, istediğiniz piksel dolgusunu girin ve sonuçtaki EM değerini kullanın.

Duyarlı tipografi: Masaüstünde 32px olan bir başlık oluşturuyorsunuz. 32px girin ve 2rem olduğunu görün, bu kullanıcılar tarayıcı yazı tifi boyutunu ayarladığında uygun şekilde ölçeklenecektir.

Gerçek Dünya CSS Birim Dönüşüm Kullanım Örnekleri

Formülleri bilmek bir şeydir—onları üretim kodunda etkili bir şekilde uygulamak başka bir şeydir. İşte birim dönüşümünün projelerinizde somut bir fark yarattığı nokta.

Tasarım Dosyalarını Responsive CSS'e Dönüştürme

Figma tasarımında her şey piksel olarak belirtilmiş. Kart bileşeni şunu gösteriyor:

Dolgu: 24px
Başlık yazı tipi boyutu: 28px
Gövde yazı tipi boyutu: 16px
Alt kenar boşluğu: 40px

Bu değerleri REM birimine dönüştürmek (16px kök varsayılarak) size şunu verir:

1.card {
2  padding: 1.5rem;        /* 24px → 1.5rem */
3  margin-bottom: 2.5rem;  /* 40px → 2.5rem */
4}
5
6.card__heading {
7  font-size: 1.75rem;     /* 28px → 1.75rem */
8}
9
10.card__body {
11  font-size: 1rem;        /* 16px → 1rem */
12}
13

Faydası nedir? Görme engelli bir kullanıcı tarayıcısının varsayılan yazı tipi boyutunu 16px'den 20px'e yükselttiğinde, kartınız orantılı olarak ölçeklenir. Dolgu, kenar boşlukları ve metin hepsi %25 büyür, tasarımın görsel dengesini korur. Piksel değerlerinde, sadece metin büyüyecek ve düzen bozulacaktır.

Erişilebilir Bileşen Kütüphaneleri Oluşturma

Bileşen kütüphaneleri, herhangi bir boyutta çalışan düğmelere ihtiyaç duyar—küçük, orta, büyük. EM birimlerini dolgu için kullanmak, kendine özgü ölçeklendirme sağlar:

1.button {
2  /* 16px yazı tipi boyutunda temel düğme */
3  font-size: 1rem;
4  padding: 0.75em 1.5em;  /* Temel boyutta 12px 24px */
5  border: 1px solid currentColor;
6  border-radius: 0.25em;
7}
8
9.button--large {
10  font-size: 1.25rem;  /* 20px */
11  /* Dolgu otomatik olarak 15px 30px (0.75em × 20px) olur */
12}
13
14.button--small {
15  font-size: 0.875rem;  /* 14px */
16  /* Dolgu otomatik olarak 10.5px 21px (0.75em × 14px) olur */
17}
18

Dolgu, düğmenin yazı tipi boyutuna göre EM birimleriyle tanımlandığı için otomatik olarak ölçeklenir. Oranları bir kez tanımlarsınız ve tüm boyut varyantlarında çalışır. Modern CSS mimari desenlerinde önerilen bu yaklaşım, kodu azaltır ve görsel tutarlılığı korur.

[Çeviri devam eder...]

CSS Birimlerinin Evrimi: Sabitlerden Esneklere

Pikselden göreli birimlere geçiş, web'in statik belgelerden esnek uygulamalara yolculuğunu yansıtır. Bu tarihi anlamak, bugün birimler arasında neden dönüşüm yaptığımızı açıklar.

Piksel Mükemmelliği Dönemi (1990'lar-2000'ler)

Erken web siteleri belirli ekran genişlikleri için tasarlanıyordu—640px, sonra 800px, sonra 1024px. CSS düzenleri tamamen pikselleri kullanıyordu çünkü baskı tasarımcıları bunu anlıyordu. Siteler tarayıcılar arasında özdeş görünüyordu (çalıştığında), ancak beklenmedik ekran boyutlarında tamamen bozuluyordu. Web, baskı gibi ele alınıyordu: sabit, kontrollü, öngörülebilir.

EM birimleri CSS şartnamesinde mevcuttu, tipografiden miras alınmıştı, ancak çoğu geliştirici bunlardan kaçınıyordu. Birimlerin birikmesi karmaşıktı ve mobil cihazlar bizi esnek düşünmeye zorlamıyordu.

Mobil Uyarı Çağrısı (2007-2010)

iPhone her şeyi değiştirdi. Aniden, trafiğin önemli bir kısmı 320px genişliğindeki ekranlardan geliyordu. Yakınlaştırma-uzaklaştırma yardımcı olsa da, 1024px masaüstü için tasarlanmış web siteleri mobilde zorluk çıkarıyordu.

Ethan Marcotte'un 2010 tarihli esnek web tasarımı makalesi yeni bir yaklaşımı netleştirdi: akıcıızgaralar, esnek görüntüler ve medya sorguları. Göreli birimler isteğe bağlı değil, zorunlu hale geldi. Ancak EM birimlerinin birikmesi karmaşık düzenlerde hatalara neden oluyordu.

REM Birimleri İmdada Yetişiyor (2010-Günümüz)

CSS3, 2010 civarında REM birimini tanıttı ve EM'nin en büyük sorununu çözdü: birikim. REM, miras karmaşıklığı olmadan göreli ölçeklendirme sağladı. Internet Explorer 9, 2011'de desteği ekledi ve 2015'e gelindiğinde REM birimleri yaygınlaştı.

Bugün, en iyi uygulamalar birimleri stratejik olarak birleştirir. Tipografi ve boşluklar için REM. Bileşen içi orantılar için EM. İnce ayrıntılar için piksel. Modern CSS işlevleri gibi clamp(), bu birimleri dinamik olarak karıştırarak herhangi bir bağlamda uyum sağlayan düzenler oluşturur.

Bu evrim—katı pikselden esnek göreli birimlere—kullanıcı beklentilerinin "web siteleri her yerde aynı görünmelidir" den "web siteleri her yerde iyi çalışmalıdır" a dönüşümünü yansıtır.

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

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

1// PX, REM ve EM birimleri arasında dönüşüm
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// Kullanım örneği
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

Birim Dönüşümü için CSS Özel Özellikleri

1:root {
2  /* Temel yazı boyutları */
3  --root-font-size: 16px;
4  --base-font-size: var(--root-font-size);
5  
6  /* Ortak piksel değerlerinin REM'e dönüştürülmesi */
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

Birim Dönüşümü için SCSS Mixinleri

1// Birim dönüşümü için SCSS fonksiyonları
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    // Üst eleman yazı boyutu (18px) kullanılarak 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"""
3    return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6    """REM birimlerini piksellere dönüştür"""
7    return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10    """Pikselleri EM birimlerine dönüştür"""
11    return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14    """EM birimlerini piksellere dönüştür"""
15    return em * parent_font_size
16
17# Kullanım örneği
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

CSS Birimlerini Dönüştürürken Sık Yapılan Hatalar

Yüzlerce kod tabanını inceledikten sonra, bu hataların sürekli tekrarlandığını fark ettim. Bunlardan kaçınmak, hata ayıklama sürenizden tasarruf etmenizi sağlayacaktır.

Hata 1: Özel Kök Yazı Boyutlarını Hesaba Katmamak

Sorun: 24px'i varsayılan 16px kök yazı boyutunu düşünerek 1.5rem'e dönüştürüyorsunuz, ancak projeniz html { font-size: 62.5%; } kullanıyor, bu da kök yazı boyutunu 10px yapıyor. Öğeniz 24px yerine 15px oluyor.

Çözüm: Dönüştürmeden önce projenizin gerçek kök yazı boyutunu her zaman kontrol edin. Dönüştürücünün kök yazı boyutunu projenizin gerçekliğiyle eşleşecek şekilde ayarlayın.

Hata 2: İç İçe Bileşenlerde Tipografide EM Birimlerini Kullanmak

Sorun: Başlıklar için font-size: 1.2em ile bir kart bileşeni oluşturuyorsunuz. Harika çalışıyor. Sonra bir kartı başka bir kartın içine yerleştirdiğinizde, iç kartın başlığı 1.2em yerine 1.44em (1.2 × 1.2) oluyor.

Çözüm: Özel olarak basamaklı davranışı istemediğiniz sürece tipografide REM birimleri kullanın. EM birimlerini yerel yazı boyutuyla ölçeklendirilmesi gereken boşluklar için saklayın.

Hata 3: Kenarlık Genişliklerini REM'e Dönüştürmek

Sorun: Tutarlılık için border: 1px'i border: 0.0625rem'e dönüştürüyorsunuz. Kullanıcılar yakınlaştırdığında veya yazı boyutunu değiştirdiğinde, kenarlıklarınız kalın ve çirkin görünüyor.

Çözüm: Kenarlıkları piksel olarak tutun. Alt piksel kenarlıklar (0.5px) tarayıcılarda tutarsız destek görür ve kenarlıkların metinle ölçeklenmesine nadiren ihtiyaç duyulur.

Hata 4: Medya Sorgusu Birimlerinin Kullanıcı Tercihlerini Unutmak

Sorun: Tablet kesme noktası için @media (min-width: 768px) yazıyorsunuz. Daha büyük varsayılan yazı boyutu ayarlayan kullanıcılar tablet düzenini alamıyorlar.

Çözüm: Medya sorgularında EM veya REM birimleri kullanın: @media (min-width: 48em). Bu, MDN duyarlı tasarım belgelerinin önerdiği gibi kullanıcı yazı boyutu tercihlerine saygı duyar.

Hata 5: Hesaplama Yöntemlerini Karıştırmak

Sorun: Sass'ınız bir hesaplama yöntemi kullanıyor, JavaScript'iniz başka bir yöntem, zihinsel matematiğiniz ise üçüncü bir yöntem. Sonuçlar eşleşmiyor, bu da piksel düzenleme hayal kırıklığına neden oluyor.

Çözüm: Bu dönüştürücüyü doğru kaynak olarak kullanın. Yer imleyin, kod incelemelerinde referans alın ve takımınızdaki herkesin aynı dönüştürme metodolojisini kullandığından emin olun.

Sık Sorulan Sorular

REM ve EM birimleri arasındaki fark nedir?

Referans noktası tamamen farklıdır. REM birimleri her zaman kök <html> öğesinin yazı tipi boyutuna bakar—öğeniz ne kadar iç içe olursa olsun, 1rem her zaman aynı hesaplanmış değere eşittir. EM birimleri ise hemen üst öğesinin yazı tipi boyutuna bakar, bu da basamaklı bir etki yaratır.

Şöyle düşünün: eğer her biri font-size: 1.2em olan üç <div> öğesini iç içe yerleştirirseniz, en içteki div'in metni beklediğinizden çok daha büyük olacaktır çünkü her seviye çarpımı biriktirir. Her seviyede font-size: 1.2rem kullanıldığında, tüm üç div aynı yazı tipi boyutuna sahip olur çünkü hepsi kök referansı kullanır.

İşte bu yüzden REM, tarayıcı desteği geliştikten sonra tipografide popüler hale geldi—miras zincirini izlemenin zihinsel yükünü ortadan kaldırır.

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

Hiçbir birim her durumda kazanmaz. En iyi responsive tasarımlar birimleri stratejik olarak birleştirir:

REM için kullanın: Genel boşluklar, tipografya ölçekleri, bileşen boşlukları ve kullanıcının yazı tipi tercihlerine ölçeklenecek tüm ölçümler

EM için kullanın: Bileşen içi boşluklar (düğme dolgusu, kart boşlukları), medya sorguları (kullanıcı tercihlerini saygı duyar), ve yerel bağlamında ölçeklenecek öğeler

Pikseller için: 1px kenarlıklar (net görünürler), kutu gölgeleri (ince gölgeler kesinlik gerektirir), ve SVG çizgi kalınlıkları

Yüzde veya görünüm birimleri için: Konteyner genişlikleri, tam yükseklik bölümleri

Tek bir birimi her yerde kullanan kod tabanları gördüm—bu her zaman bakım zorlukları yaratır. Her birimi en fazla fayda sağladığı yerde kullanın.

(Çeviri devam eder...)

Referanslar ve Daha Fazla Okuma

"CSS Değerleri ve Birimler Modülü Seviye 3." W3C Tavsiyesi. https://www.w3.org/TR/css-values-3/
Marcotte, Ethan. "Responsive Web Tasarımı." A List Apart, 25 Mayıs 2010. https://alistapart.com/article/responsive-web-design/
Rutter, Richard. "Tipografik Stilin Web'e Uygulanması." http://webtypography.net/
"CSS Birimleri." MDN Web Belgeleri. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
"CSS Pikselleri vs. Fiziksel Pikseller." Stack Overflow Belgelendirmesi. https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels
Coyier, Chris. "CSS'nin Uzunlukları." CSS-Tricks. https://css-tricks.com/the-lengths-of-css/
"CSS özel özelliklerini (değişkenlerini) kullanma." MDN Web Belgeleri. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
"CSS'de rem Birimlerini Anlama ve Kullanma." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

CSS Birimlerini Doğru Bir Şekilde Dönüştürmeye Başlayın

Manuel CSS birim dönüşümü zahmetli ve hata yapmaya açıktır. Zihinsel hesaplamalar yapıyor, hesaplamaları ikinci kez kontrol ediyor ve yazı tipi boyutlarını doğru yaptığınızı umuyorsunuz. Bu PX'ten REM'e ve EM'e dönüştürücü bu sürtünmeyi ortadan kaldırır.

Tasarım dosyalarınızdan piksel değerlerini girin, yazı tipi boyutlarını projenizin yapılandırmasıyla eşleşecek şekilde ayarlayın ve anında doğru REM ve EM değerlerini alın. Bunları doğrudan kodunuza kopyalayın. İster yeni bir tasarım sistemi uyguluyorsunuz, mevcut bir kod tabanını göreli birimlerle yeniden düzenliyorsunuz, ya da bu birimlerin nasıl ilişkilendiğini anlamaya çalışıyorsunuz, dönüştürücü matematiği halleder, böylece siz inşa etmeye odaklanabilirsiniz.

Erişilebilirlik uyumlu siteler üzerinde çalışan geliştiriciler için, bu araç düzenlerin kullanıcılar yazı tipi tercihlerini ayarladığında doğru şekilde ölçeklenmesine yardımcı olur—bu WCAG 2.1 Seviye AA altında bir gerekliliktir. Bileşen kütüphaneleri oluşturanlar için, hangi EM değerlerinin istediğiniz oranları oluşturduğunu netleştirir. Figma tasarımlarını üretim CSS'ine çeviren herkes için, dönüşüm iş akışını önemli ölçüde hızlandırır.

Formüller W3C CSS Değerler ve Birimler Modül spesifikasyonu temel alınarak oluşturulmuştur, bu da dönüşümlerin tarayıcıların bu değerleri gerçekten nasıl hesapladığıyla eşleşmesini sağlar.