PX vs REM vs EM: Eksiksiz CSS Birimleri Rehberi
Açıklamaya geçmeden px vs rem vs em sorusunun kısa yanıtı şu. Boyutlandırmanın neredeyse tamamı için rem kullanın — font boyutları, padding, margin, gap, border-radius ve breakpoint’ler — çünkü rem, okuyucunun tarayıcı font boyutu ayarıyla birlikte ölçeklenir. Asla ölçeklenmemesi gereken birkaç şey için px kullanın; örneğin 1px’lik bir kenarlık ya da hassas bir gölge ofseti. Bir değerin elemanın kendi font boyutuyla birlikte büyümesi gereken nadir yerel durumda ise em kullanın; örneğin butonun metnini takip eden buton padding’i.
Bu kural, kararların %90’ını kapsar. Asıl sorun kalan %10’da yatar: herkesi ilk seferinde şaşırtan em birikme matematiği, yakınlaştırmada düzenleri bozan media query hatası ve px’in aslında daha erişilebilir seçim olduğu durumlar. Bu rehber, her biri için çalıştırılabilir CSS örnekleriyle bu üç konuyu da baştan sona ele alıyor; üstelik stil yazarken açık tutabileceğiniz özellik bazlı bir karar tablosu da var.
px, rem ve em gerçekte ne anlama gelir
Üç birim, üç farklı referans noktası. Aradaki bütün fark bu kadar.
px mutlak bir birimdir. Bir px, bir CSS pikselidir ve etrafında ne olursa olsun aynı boyutta kalır. border: 1px solid bir pikseldir, nokta. İşin püf noktası şu: “mutlak” olması aynı zamanda kullanıcının tercihlerini yok saydığı anlamına gelir — bunun neden önemli olduğuna birazdan değineceğiz.
rem, kök elemanın font boyutuna görelidir. Kök, <html> elemanıdır ve tarayıcılar onun font boyutunu varsayılan olarak 16px yapar. Yani standart bir kurulumda 1rem, iç içe geçme durumundan bağımsız olarak sayfanın her yerinde 16px’e eşittir. İşe yarayan da bu tutarlılık: tek bir çapa değer, sürprizsiz.
em, mevcut elemanın font boyutuna görelidir (font-size dışındaki özellikler için ise ebeveynin font boyutuna). Bu referans, elemanları iç içe geçirdikçe değiştiğinden, em değerleri bağlama göre kayar. Aynı 1.5em, bir yerde 24px, başka bir yerde 30px olarak çözülebilir.
Aklınızda tutmanız gereken çapa 16px = 1rem’dir. Başka hiçbir şeyi içselleştirmeyecekseniz, bunu içselleştirin. Belirli bir değeri dönüştürmeniz gerektiğinde, px’ten rem’e dönüştürücü seçtiğiniz herhangi bir temele göre bölmeyi yapar.
Bir bakışta px vs rem vs em
| Birim | Neye göreli | Kullanıcı font boyutuyla ölçeklenir mi? | Tipik kullanım | İç içe geçtiğinde davranış |
|---|---|---|---|---|
px | Hiçbir şey (mutlak) | Hayır | Kenarlıklar, gölge ofsetleri, ince çizgiler | Her zaman aynı boyutta |
rem | Kök <html> font boyutu | Evet | Font boyutu, boşluk, breakpoint | Her zaman aynı boyutta |
em | Mevcut elemanın font boyutu | Evet | Bir bileşene bağlı yerel değerler | Birikir — kayabilir |
Çoğu tartışmayı çözen iki sütun “kullanıcı font boyutuyla ölçeklenir mi” ve “iç içe geçtiğinde davranış”tır. rem her ikisinde de kazanır: hem okuyucunun tercihine saygı gösterir hem de öngörülebilir kalır. em, ilk faydayı paylaşır ama ikincisinden ödün verir.
Her birim nasıl hesaplanır
Matematik düz aritmetiktir. İnsanları yanıltan şey, hangi sayıya bölüp çarpacağınızdır.
rem, kök font boyutunu kullanır:
rem = px ÷ root-font-sizeVarsayılan 16px kökte, 24px ÷ 16 = 1.5rem olur. Geri dönmek için çarpın: 1.5rem × 16 = 24px. Sayfadaki her rem aynı 16’yı (ya da kökü neye ayarladıysanız onu) kullanır; rem’in öngörülebilir olmasının nedeni tam da budur.
em, elemanın kendi font boyutunu kullanır:
em = px ÷ current-element-font-sizeBir elemanın font-size değeri 20px ise, o elemanda 1em 20px, 0.5em 10px ve 1.5em padding 30px olur. Elemanın font boyutunu değiştirin, ona bağlı her em değeri onunla birlikte değişir. Bu yerel bağ, em’in amacıdır — ve aynı zamanda tuzağıdır.
em birikme tuzağı
Çoğu rehberin geçiştirdiği kısım burası. Hepsi font boyutu için em kullanan elemanları iç içe geçirdiğinizde, değerler ağaçtan aşağı doğru çarpılır. Her seviye, ebeveyninin hesaplanmış font boyutunu miras alır ve üzerine kendi em çarpanını uygular.
.menu { font-size: 1.2em; } /* ebeveyn 16px → 19.2px */
.menu .item { font-size: 1.2em; } /* ebeveyn 19.2px → 23.04px */
.menu .item .sub { font-size: 1.2em; } /* ebeveyn 23.04px → 27.648px */Her seviye “ebeveyninin %120’si”dir; kulağa zararsız geliyor. Ama ebeveyn zaten büyüdüğü için, üçüncü seviye orijinal 16px’e göre 1.2 × 1.2 × 1.2 = 1.728em olur — yaklaşık 27.6px, kuralı tek başına okuduğunuzda çıkarabileceğiniz 19.2px değil. Bir liste içinde bir liste, onun içinde de bir bileşen olduğunda, metin izini sürmesi zor bir şekilde şişer.
rem bunu tamamen aşar. 1.2rem, belgenin en üstünde de olsa on iki seviye derinde de olsa 19.2px’tir; çünkü her zaman köke göre ölçülür, asla ebeveyne göre değil. Bir değer beklemediğiniz bir boyuta çözüldüğünde sorulacak ilk soru, onun em mi (ebeveyne göreli, birikir) yoksa rem mi (köke göreli, kararlı) olduğudur. Başıboş bir rem’i ayıklarken piksel boyutunu hızlıca görmek isterseniz, rem’den px’e dönüştürücü onu anında çözer.
rem ne zaman kullanılır
Varsayılan olarak rem’e uzanın. Font boyutları, padding, margin, gap, border-radius ve media query breakpoint’leri için doğru birim odur — bir okuyucu metin boyutunu ayarladığında ölçeklenmesi gereken her şey için.
Bu son cümle, erişilebilirlik argümanıdır ve varsayımsal değildir. WebAIM’in ekran okuyucu ve düşük görme anketleri, kullanıcıların büyük bir kısmının tarayıcı veya işletim sistemi varsayılan font boyutunu ayarladığını, çoğunun da standart 16px’in epey üzerine çıktığını tutarlı biçimde ortaya koyuyor. rem ile boyutlandırılmış bir düzen bu değişikliği onurlandırır: varsayılanı 20px’e çıkarın, rem tabanlı her değer orantılı olarak büyür. px ile boyutlandırılmış bir düzen ise bunu tamamen yok sayar — okuyucunun daha büyük metne ne kadar ihtiyacı olursa olsun, metin sabit kodlanmış boyutunda kilitli kalır.
:root {
font-size: 16px; /* 1rem = 16px */
}
h1 { font-size: 2rem; } /* 32px, kullanıcı tercihiyle ölçeklenir */
p { font-size: 1rem; } /* 16px */
.card { padding: 1.5rem; } /* 24px */
.card { border-radius: 0.5rem; } /* 8px */Buradaki her değer aynı köke bağlandığından, kök font boyutundaki tek bir değişiklik tüm arayüzü orantılı olarak yeniden ölçekler. Bir tasarım sistemini tutarlı tutan da budur: boşluk ve tipografi birbirinden kopmak yerine birlikte hareket eder.
%62,5 hilesi
rem aritmetiğini önemsiz kılmak için popüler bir kestirme yol var. Kök font boyutunu 62.5%’e ayarlayın; bu da 62.5% × 16px = 10px demektir:
html {
font-size: 62.5%; /* artık 1rem = 10px */
}
body {
font-size: 1.6rem; /* okunabilir 16px gövde metnini geri getirir */
}
h1 { font-size: 2.4rem; } /* 24px */
p { font-size: 1.6rem; } /* 16px */10px kök ile zihinsel hesap “piksel değerini 10’a böl”e indirgenir: 24px → 2.4rem, 12px → 1.2rem. Tek pürüz, okunabilir bir gövde boyutunu body { font-size: 1.6rem } ile geri getirmektir; çünkü ham 10px taban, varsayılan metni fazlasıyla küçük bırakır. 10px yerine yüzde olarak 62.5% kullanmak değeri göreli tutar, böylece tarayıcı varsayılanını ölçekleyen bir okuyucu yine orantılı bir büyüme elde eder. Bu tabanı benimserseniz, stil sayfanızla eşleşmesi için dönüştürücünün kök font boyutunu 10 yapın.
em ne zaman kullanılır
Bir değerin köke değil, elemanın kendi font boyutuyla ölçeklenmesini istediğinizde em kullanın. Klasik örnek bir butondur:
.btn {
font-size: 1rem; /* köke göre boyutlandırılır */
padding: 0.75em 1.5em; /* padding butonun metnini takip eder */
}
.btn--large {
font-size: 1.25rem; /* tek değişiklik her şeyi yeniden boyutlandırır */
}Padding em cinsinden olduğu için, .btn--large değiştirici metni ve padding’ini tek bir bildirimle birlikte yeniden boyutlandırır — buton her boyutta orantılı kalır. Aynı mantık, içinde durduğu metin satırına uyması için em ile boyutlandırılmış bir simge ya da fontla birlikte büyümesi gereken letter-spacing için de geçerlidir.
Pratikte işe yarayan strateji basit: küresel iskelet için rem, yerel oranlar için em. Köke ve kullanıcının tercihine yanıt vermesi için font boyutunu rem cinsinden ayarlayın; o elemanı takip etmesi gereken birkaç değeri em cinsinden ayarlayın. Yeter ki em’i derinlemesine iç içe geçen hiçbir şeyde kullanmayın, yoksa az önceki birikme tuzağı yeniden geri sızar.
px ne zaman kullanılır
Bazı değerler gerçekten ölçeklenmemeli ve bunlar için px doğrudur: 1px’lik bir ince kenarlık, hassas bir box-shadow ofseti, 2px’lik bir odak halkası. Bunlar render detaylarıdır, içerik değil. Kullanıcı metnini büyüttüğünde 1.25px’e “ölçeklenen” bir kenarlık hiçbir şey kazandırmaz ve bulanık bir çizgi olarak render edilebilir. px onu keskin tutar.
.divider { border-bottom: 1px solid; } /* 1px kalmalı */
.card { box-shadow: 0 2px 4px rgba(0,0,0,0.1); } /* sabit ofset */
.input:focus { outline: 2px solid; } /* keskin odak halkası */px’in daha erişilebilir olduğu durum
Çoğu “her zaman rem kullanın” tavsiyesinin atladığı, sezgilere aykırı kısım bu. Erişilebilir seçim “her yerde rem” değildir. “Ölçeklenmesi gerekeni ölçekle, sabit kalması gerekeni sabitle”dir.
1px’lik bir kenarlık sabit bir detaydır. Kullanıcı metni büyüttüğünde büyüsün diye onu rem’e zorlamak okunabilirliğe yardım etmez — sadece bir ince çizgiyi bulanıklaştırır. Bu özellikler için px daha erişilebilir seçimdir, çünkü tam da yerinde durur.
İnsanların aslında yaptığı hata tam tersidir: font boyutları ve breakpoint’ler gibi yanıt vermesi gereken şeyler için px kullanmak. px’in erişilebilirliğe zarar verdiği yer burasıdır. Yani kural birimle ilgili değildir, özellikle ilgilidir. Değerin, okuyucunun etkileşime girdiği bir içerik mi (ölçekle — rem) yoksa sabit bir render detayı mı (sabitle — px) olduğunu sorun. Birim, yanıttan çıkar.
Media query tuzağı
Bu, gerçek düzenleri bozar ve çoğu rehber bundan söz etmez. px cinsinden yazılmış media query breakpoint’leri, tarayıcının font boyutu yakınlaştırmasına umduğunuz gibi yanıt vermez.
Bir kenar çubuğunun daraldığı width: 600px breakpoint’ini düşünün. Düşük görme sahibi bir kullanıcı rahat okumak için tarayıcı varsayılanını 24px’e ayarlıyor. İçeriğinizin artık daha fazla yatay alana ihtiyacı var — büyüyen metin daha erken yeniden akmak istiyor. Ama bir px breakpoint metnin büyüdüğünü bilmez; hâlâ tam 600px görünüm genişliğinde tetiklenir, böylece düzen yanlış anda değişir ve içerik sıkışır ya da üst üste biner.
İki yaklaşımı karşılaştırın:
/* px breakpoint — kullanıcının font boyutu tercihini yok sayar */
@media (min-width: 600px) {
.sidebar { display: block; }
}
/* em/rem breakpoint — kullanıcının font boyutuna yanıt verir */
@media (min-width: 37.5em) {
.sidebar { display: block; }
}37.5em, varsayılan 16px’te 600px’tir (600 ÷ 16 = 37.5). Fark davranışsaldır: kullanıcı varsayılan font boyutunu ikiye katladığında, em breakpoint de etkili biçimde ikiye katlanır, böylece düzen metinle orantılı bir görünüm genişliğinde değişir — tam da içeriğin ihtiyaç duyduğu anda. px breakpoint donmuş kalır.
Bilmeye değer bir gariplik: media query koşullarında, em ve rem’in ikisi de herhangi bir html geçersiz kılmasına değil, tarayıcı varsayılan font boyutuna göre çözülür, dolayısıyla orada aynı şekilde davranırlar. Her iki birim de hatayı düzeltir; px ise ona yol açar.
Özellik bazlı karar tablosu
Emin olamadığınızda yanıtı bu tablo verir, mantığı her seferinde yeniden türetmenize gerek kalmadan.
| Özellik | Önerilen birim | Neden |
|---|---|---|
font-size | rem | Kullanıcının font boyutu tercihiyle ölçeklenir |
padding / margin | rem | Boşluk, metinle birlikte ölçeklenir |
border | px | İnce çizgiler keskin ve sabit kalmalı |
box-shadow ofseti | px | Hassas bir render detayı, içerik değil |
border-radius | rem | Köşe yuvarlaklığını ölçekle orantılı tutar |
| media query | em / rem | Breakpoint’ler font boyutu yakınlaştırmasına yanıt vermeli |
width / max-width | rem (metin için sıklıkla ch) | Ölçeklenebilir düzen genişlikleri; ch satır uzunluğunu sınırlar |
line-height | birimsiz | Birimsiz çarpan doğru biçimde miras alınır |
line-height satırı bir not hak ediyor, çünkü yaygın bir hatadır. Her zaman line-height: 1.5 yazın, birimsiz. Birimsiz bir değer, her elemanın kendi font boyutuna göre hesapladığı bir çarpandır, böylece iç içe geçen elemanlar okunabilir kalır. Bunun yerine line-height: 1.5em ya da 24px yazarsanız, hesaplanmış uzunluk miras alınır; bu da daha büyük fonta sahip bir alt elemanın ebeveynin satır yüksekliğini koruması ve metninin çakışmaya başlaması demektir. Birimsiz değer, bütün bu sorunu önler.
px ile rem arasında dönüştürme
Çapayı bir kez aklınızda tuttuğunuzda aritmetik kafadan yapılacak kadar küçüktür: 16px = 1rem. rem’e gitmek için 16’ya bölün, px’e geri dönmek için 16 ile çarpın.
| px | rem (16px taban) |
|---|---|
| 8px | 0.5rem |
| 12px | 0.75rem |
| 16px | 1rem |
| 24px | 1.5rem |
| 32px | 2rem |
%62,5 hilesini kullanırsanız taban 10px olur ve matematik daha da basitleşir — sadece 10’a bölün ya da çarpın, böylece 24px = 2.4rem. Tek kural, her zaman stil sayfanızın gerçekten ayarladığı tabana göre dönüştürmektir.
Geri kalan her şey için — garip değerler, özel bir kök ya da bir Figma dışa aktarımını toplu dönüştürmek — zihinsel hesabı atlayın ve px’ten rem’e dönüştürücü ya da rem’den px’e dönüştürücü kullanın. Her ikisi de herhangi bir kök font boyutu ayarlamanıza ve gerçek zamanlı olarak iki yönde de dönüştürmenize olanak tanır. Sonrasında karışık birimlerle dolu bir stil sayfasını derleyip toparlıyorsanız, CSS biçimlendirici boşlukları ve girintileri sizin için normalleştirir.
Yaygın hatalar
Birkaç kalıp, birimle ilgili sıkıntıların çoğuna yol açar:
Kök font boyutunu px cinsinden ayarlamak. html { font-size: 16px } yazmak (varsayılanı bırakmak ya da 100% / bir yüzde kullanmak yerine), kullanıcının tarayıcı font boyutu tercihini doğrudan geçersiz kılar. rem değerleri yine ona göre hesaplanır, ama okuyucu artık tüm sayfayı ölçekleyemez. Kökü varsayılanda bırakın ya da bir yüzde kullanın.
px ve rem’i sistemsiz karıştırmak. Bazı font boyutları px, bazıları rem, boşluk ikisi arasında bölünmüş — sonuç, kullanıcı metnini ayarladığında dengesiz ölçeklenen bir düzendir. Varsayılan olarak rem’i seçin ve px’i karar tablosundaki bilinçli istisnalara saklayın.
Küresel boşluk için em kullanmak. Geniş ölçüde iç içe geçen kapsayıcılarda em, birikme tuzağını yeniden devreye sokar, böylece ağacın derininde bir padding kimsenin amaçlamadığı bir şeye çözülür. Küresel boşluğu rem’de tutun; em’i yerel, bileşen kapsamlı değerlere saklayın.
line-height’a birim vermek. Yukarıda anlatıldığı gibi, line-height: 24px ya da 1.5em hesaplanmış bir uzunluk olarak miras alınır ve farklı font boyutlarına sahip elemanlarda bozulur. Her zaman birimsiz bir çarpan kullanın.
SSS
rem, px’ten daha mı iyi?
Boyutlandırmanın çoğu için, evet — rem px’ten daha iyidir, çünkü kullanıcının tarayıcı font boyutu tercihiyle ölçeklenir; px ise bunu yok sayar. Ama “daha iyi” özelliğe bağlıdır: keskin kalması gereken 1px kenarlıklar ve gölge ofsetleri gibi sabit detaylar için doğru seçim px’tir. İçerik boyutlandırması için rem, render detayları için px kullanın.
1rem kaç pikseldir?
1rem, kök font boyutuna piksel cinsinden eşittir; bu da neredeyse tüm tarayıcılarda varsayılan olarak 16px’tir. Yani standart bir kurulumda 1rem = 16px, 1.5rem = 24px ve 2rem = 32px. Bir stil sayfası html { font-size } değerini geçersiz kılarsa — örneğin %62,5 hilesiyle 10px’e — o zaman 1rem onun yerine o değere eşittir.
font-size için rem mi yoksa em mi kullanmalıyım?
font-size için neredeyse her durumda rem kullanın. rem köke göre ölçer, böylece bir eleman ne kadar derinlemesine iç içe geçerse geçsin öngörülebilir kalır. em ise ebeveynin font boyutuna göre ölçer; bu da ağaçtan aşağı birikir ve iç içe geçen metnin beklenmedik biçimde şişmesine yol açar. em’i tek bir bileşene bağlı yerel değerlere saklayın.
rem yerine ne zaman px kullanmalıyım?
Kullanıcının font boyutuyla ölçeklenmemesi gereken değerler için px kullanın: 1px kenarlıklar, hassas box-shadow ofsetleri, odak halkası kenarlıkları ve diğer sabit render detayları. Bunlar içerikten çok keskin tasarım detaylarıdır, dolayısıyla onları px ile sabitlemek daha erişilebilir seçimdir. İçerikle ilgili her şey yine rem kullanmalıdır.
px kullandığımda media query’ler neden bozuluyor?
px cinsinden media query breakpoint’leri, tarayıcının font boyutu yakınlaştırmasına yanıt vermez. Bir kullanıcı varsayılan fontunu büyüttüğünde içeriğinin daha fazla alana ihtiyacı olur, ama bir px breakpoint hâlâ aynı görünüm genişliğinde tetiklenir — böylece düzen yanlış anda değişir. Kullanıcının font boyutuyla ölçeklenen em ya da rem breakpoint’leri kullanın.
%62,5 font-size hilesi nedir?
%62,5 hilesi html { font-size: 62.5% } ayarlar ve kök font boyutunu 10px yapar (16’nın %62,5’i). 10px taban ile rem matematiği “10’a böl”e dönüşür: 24px = 2.4rem, 12px = 1.2rem. Geliştiriciler sonra okunabilir 16px gövde metnini geri getirmek için body { font-size: 1.6rem } ayarlar.
px, rem ve em’i karıştırmak sorun mu?
Hayır, her biri kendine uyan özelliği izlediğinde px, rem ve em’i karıştırmak doğrudur: tipografi ve boşluk için rem, sabit detaylar için px, yerel bileşen kapsamlı değerler için em. Sorun çıkaran şey, onları sistemsiz karıştırmaktır — örneğin bazı font boyutları px, bazıları rem. Varsayılan olarak rem’i seçin ve px ile em’i bilinçli istisnalar olarak ele alın.
padding ve margin için hangi birimi kullanmalıyım?
padding ve margin için rem kullanın, böylece kullanıcı font boyutunu ayarladığında boşluk metinle birlikte ölçeklenir. Bu, düzeni orantılı ve erişilebilir tutar. Bir elemanın kendi font boyutunu takip etmesi gereken padding için em’i saklayın — örneğin padding’i metniyle birlikte büyüyen bir buton — ve birikme yaşandığı için derinlemesine iç içe geçen kapsayıcılarda em’den kaçının.