Bu basit hesaplayıcı ile piksel (PX), kök em (REM) ve em (EM) CSS birimleri arasında dönüşüm yapın. Duyarlı web tasarımı ve geliştirme için gereklidir.
Pikseller (PX), kök em (REM) ve em (EM) birimleri arasında dönüşüm yapın. Diğer birimlerdeki eşdeğer değerleri görmek için herhangi bir alana bir değer girin.
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.
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}
6Piksellerin ana özellikleri:
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}
10REM birimlerinin ana özellikleri:
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}
9EM birimlerinin ana özellikleri:
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:
Pikselleri REM birimlerine dönüştürmek için, piksel değerini kök yazı tipi boyutuna bölün:
Örneğin, varsayılan kök yazı tipi boyutu 16px ile:
Pikselleri EM birimlerine dönüştürmek için, piksel değerini ebeveyn öğenin yazı tipi boyutuna bölün:
Örneğin, ebeveyn yazı tipi boyutu 16px ile:
REM birimlerini piksellere dönüştürmek için, REM değerini kök yazı tipi boyutu ile çarpın:
Örneğin, varsayılan kök yazı tipi boyutu 16px ile:
EM birimlerini piksellere dönüştürmek için, EM değerini ebeveyn öğenin yazı tipi boyutu ile çarpın:
Örneğin, ebeveyn yazı tipi boyutu 16px ile:
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:
Eğer hem kök hem de ebeveyn yazı tipi boyutları aynıysa (örneğin, 16px), o zaman 1rem = 1em olur.
EM birimlerini REM birimlerine dönüştürmek için, aşağıdaki formülü kullanın:
Yine, eğer her iki yazı tipi boyutu eşitse, o zaman 1em = 1rem olur.
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:
<html> yazı tipi boyutu değerine eşit olacak şekilde ayarlayınHer 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:
Birimler arasında dönüştürmek, gerçekten duyarlı tasarımlar oluşturmak için gereklidir:
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}
9Göreceli birimlerin kullanımı, kullanıcı tercihlerini dikkate alarak erişilebilirliği artırır:
Modern tasarım sistemleri, düşünceli birim kullanımından faydalanır:
Harmonik tipografi oluşturmak, dikkatli bir birim seçimi gerektirir:
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 */
8Figma veya Photoshop gibi araçlardan tasarımlar uygularken:
PX, REM ve EM en yaygın birimler olsa da, dikkate alınması gereken alternatifler vardır:
CSS birimlerinin tarihi, sabit düzenlerden günümüzün duyarlı, erişilebilir yaklaşımlarına geçişi yansıtır.
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.
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ı.
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.
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ı.
Günümüz web geliştirmesi, farklı amaçlar için birimlerin bir karışımını benimsemektedir:
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.
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
311: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}
341// 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}
261def 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
21REM (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.
Her durum için tek bir "en iyi" birim yoktur. Genellikle birimlerin bir kombinasyonu en etkili olanıdır:
En ideal yaklaşım, her birimi en iyi şekilde kullanarak uyumlu bir sistem oluşturmaktır.
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.
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 ve EM birimlerinin desteklenmesi önemli ölçüde artmıştır. Medya sorgularında EM birimlerinin kullanılması genellikle önerilir çünkü:
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Çoğu tasarım aracı esas olarak piksellerle çalışır. Tasarımları uygularken:
Bazı tasarım araçları, bu dönüşüm sürecini otomatik olarak yardımcı olabilecek eklentilere sahiptir.
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.
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.
"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/
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!
İş akışınız için faydalı olabilecek daha fazla aracı keşfedin