px birimini em birimine çevirin Pixels ↔ Em Ücretsiz Çevrimiçi Güvenli
px cinsinden bir değer yazın, karşılığını hemen em cinsinden okuyun. Hesap tarayıcınızda yapılır, hiçbir yere bir şey gönderilmez ve sonucun neye bağlı olduğu varsayılmak yerine aşağıda yazılıdır.
Hiçbir şey yüklenmez
Alışılmış boyutlar — px birimini em birimine çevirin
| px | em |
|---|---|
| 8 | 0.5 |
| 10 | 0.625 |
| 12 | 0.75 |
| 14 | 0.875 |
| 16 | 1 |
| 18 | 1.125 |
| 20 | 1.25 |
| 24 | 1.5 |
| 32 | 2 |
| 48 | 3 |
| 64 | 4 |
Bu birimler nereden geliyor
CSS'teki piksel, ekranınızdaki piksel değildir. Ekranların yoğunluğu öngörülebilir olmaktan çıkınca, gerçek piksellerle ölçülmüş bir sayfa, ekranlar keskinleştikçe küçülen bir sayfaya dönüştü; bu yüzden CSS pikseli bir referans uzunluk olarak yeniden tanımlandı: rahat bir okuma mesafesinden görülen, inçin yaklaşık 1/96'sı. Bu sayfadaki her şey bunun üzerine kuruludur. Em, web'den eskidir — kurşun dizgide dökülmüş bir bloğun genişliğiydi, adını büyük M harfinden alır — ve CSS'te yürürlükteki yazı boyu demektir; öğeleri iç içe geçirdikçe değişmesinin sebebi budur. Rem tam da bundan kaçmak için eklendi: kök öğenin em'idir ve asla birikmez. Vw, duyarlı tasarımla geldi: görüntü alanının genişliğinin yüzde biri, o genişlik ne çıkarsa.
Onlarla nerede karşılaşırsınız
Bunlar her stil sayfasının birimleridir. Piksel kenarlıkları, gölgeleri ve ölçeklenmemesi gereken her şeyi boyutlandırır; rem yazıyı, boşlukları ve yerleşimi boyutlandırır, böylece kökteki tek bir değişiklik bütün bir arayüzü yeniden ölçekler; em kendi metnini izlemesi gereken şeyleri boyutlandırır, bir düğmenin iç boşluğu gibi; vw ise her aygıtta ekranı doldurması gereken başlıkları ve açılış bölümlerini. Aralarında çevirmek, piksellerle teslim edilmiş bir tasarımı ölçeklenen bir stil sayfasına dönüştürmenin günlük aritmetiğidir.
Sık sorulan sorular
Neden alışılmış başlangıç noktası 16 px?
Çünkü bütün büyük tarayıcılarda varsayılan metin boyu budur ve bunu geçersiz kılmayan bir stil sayfası onu devralır. Dolayısıyla varsayılan ayarda bir rem 16 px eder; tanıdık çevrimler buradan gelir: 0,5 rem 8 px, 1,5 rem 24 px. Bir kullanıcı tarayıcı ayarlarından varsayılanı büyütmüşse, aynı rem değerleri de onunla birlikte büyür — onları kullanmanın anlamı tam olarak budur.
rem mi kullanmalıyım, em mi?
Sayfanın bütününü izlemesi gereken her şey için rem — yazı ölçeği, boşluklar, yerleşim genişlikleri — çünkü kökten ölçülür ve asla birikmez. İçinde durduğu metni izlemesi gereken her şey için em: bir düğmenin iç boşluğu, bir simgenin yanındaki aralık, bir alıntının girintisi. Yaygın hata, em ile boyutlandırılmış öğeleri iç içe geçirmektir: 1,2 em içindeki 1,2 em 1,44 olur, sonra 1,73, derken sayfanın altındaki metin tasarlanandan iki kat büyük çıkar.
Sonuç kesin mi?
İki birim birbirinden tam sayılarla tanımlanıyorsa evet — sayfa bunu rakamın üstünde söyler ve tek yuvarlama kaç basamak gösterildiğindedir. Oranın sonlu bir ondalığı yoksa sayfa on iki anlamlı basamak gösterir ve ilişkinin yaklaşık olduğunu söyler, başka türlüymüş gibi yapmaz.
Yazdıklarım cihazımdan çıkıyor mu?
Hayır. Hesap tarayıcınızda yapılır; hiçbir şey yüklenmez, zaten yükleyecek bir sunucu da yok. Sayfa bir kez açıldıktan sonra ağ kapalıyken de çalışır.
px'i neden em'e dönüştürürsünüz
Em, CSS'teki en eski göreli birimdir ve en çok tartışma çıkaran birimdir. Elinizde bir tasarım dosyasından gelen piksel cinsinden bir ölçü var: bir düğmede 20 px iç boşluk, bir simgenin yanında 14 px aralık, bir başlık için 36 px. Bunu em olarak istiyorsunuz ki ait olduğu metni izlesin. px'i em'e dönüştürdüğünüzde belirli bir soru soruyorsunuz: bu, geçerli yazı boyutunun kaç katı? Cevap, sayfanın tahmin edemeyeceği bir sayıya, yani değerin kullanıldığı yerde geçerli olan yazı boyutuna bağlıdır; bu yüzden dönüştürücü o sayıyı bir alana koyar ve açıkça kullanır.
Ölçüleri em ile yazmanın nedeni, metne ait şeylerin metinle birlikte büyümesi gerektiğidir. Bir düğmenin içindeki boşluk, düğmenin etiketi büyüdükçe daha geniş olmalıdır. Bir simge ile alt yazısı arasındaki boşluk, alt yazı büyüyünce açılmalıdır. Bir başlığın alt kenar boşluğu, başlığa oranla sabit kalmalıdır. Bütün bu durumlarda piksel değeri, yazı boyutu değiştiği anda yanlış olur; em değeri ise her boyutta doğrudur. Em'in bütün gerekçesi budur ve güçlü bir gerekçedir.
Hesaplama tarayıcınızda yapılır ve hiçbir şey yüklenmez. Aşağıda formülü, em'in neden rem'den daha fazla dikkat istediğini, şaşırtıcı boyutlar üreten iç içe geçme tuzağını, em'in doğru birim olduğu yerleri ve gerçek bir stil sayfasında em ile rem arasında seçim yapma yöntemini bulacaksınız.
Formül ve temel değer
em, px'in yazı boyutuna bölünmesine eşittir
Formül tek bir bölmedir: em = px ÷ temel değer. Temel değer 16 px iken 24 px, 1,5 em olur; 8 px, 0,5 em olur; 20 px, 1,25 em olur. Sayfa, neyin varsayıldığını görebilmeniz için temel değeri sonucun yanında gösterir; örneğin 24 px = 1,5 em (16 px). Aritmetik rem ile aynıdır. Anlam ise farklıdır.
Temel değer nedir
Rem için temel değer, kök öğenin yazı boyutudur. Em için ise değerin kullanıldığı öğenin yazı boyutudur; font-size özelliğinin kendisinde ise üst öğenin yazı boyutudur. Em'in tek bir cevabının olmamasının nedeni budur: aynı stil sayfası değeri farklı yerlerde farklı piksel boyutları anlamına gelir. Metni 14 px olan bir düğmenin iç boşluğunu dönüştürüyorsanız temel değer olarak 14 yazın. 32 px'lik bir başlığın kenar boşluğunu dönüştürüyorsanız 32 yazın.
Bilmediğinizde varsayılan değer
Yalnızca yaklaşık bir değer istiyorsanız temel değeri 16'da bırakın; bu, kimsenin değiştirmediği bir tarayıcıda sıradan metnin boyutudur. Sonuç, normal gövde metninden oluşan bir blok için doğrudur ve öğenin boyutu farklı çıksa bile size oran hakkında fikir verir.
Dönüşümün koruduğu ve koruyamadığı şeyler
Metne olan oranı korur
Sonuç, değerin kullanıldığı yerde geçerli olan yazı boyutuna göre orandır. Em ile yazıldığında bir boşluk, yanındaki metinle birlikte büyür ve küçülür; sözcüklerin çevresindeki boşluklar da tam olarak böyle davranmalıdır.
Tüm sayfa için tek bir sayı veremez
Dikkat etmeniz gereken nokta budur. Em, köke göre değil, öğenin kendi yazı boyutuna göre göreli; font-size için ise üst öğenin boyutuna göredir. Bu yüzden bir sayfa için tek bir cevap yoktur: aynı 1,5 em, 16 px'lik bir öğenin içinde 24 px, 24 px'lik bir öğenin içinde 36 px eder ve em içinde em çarpılır. Sayfadaki değer yalnızca alandaki temel değer için doğrudur, başka hiçbir şey için değil. Her yerde geçerli tek bir sayı istiyorsanız rem tam bunun içindir. Karşılaştırmak için px'i rem'e dönüştürün ve aynı piksel değerinin nasıl davrandığına bakın.
Yuvarlama
16'ya bölme, birçok boyut için düzgün değerler, diğerleri için ise devreden ondalıklar verir. 0,8125 em gibi bir değer stil sayfasında sorun değildir, ancak tam boyut önemli değilse 0,8 veya 0,85'e yuvarlamayı tercih edebilirsiniz. Hassasiyetin önemli olduğu yerde tam değeri koruyun.
İç içe geçme tuzağı
Em nasıl birikir
Bir listenin font-size: 0.875em olduğunu ve öğelerinin de font-size: 0.875em olduğunu varsayın. Liste, üst öğesinin yüzde 87,5'idir. Her öğe listenin yüzde 87,5'idir; bu da üst öğenin yaklaşık yüzde 76,6'sına denk gelir. Bir öğenin içine yerleştirilmiş bir liste yine küçülür ve yaklaşık yüzde 67'ye iner. Üç düzeyden sonra metin çok küçüktür ve bunu kimse bilerek yazmamıştır. Em'in biriktiği demek bu anlama gelir.
px'i em'e dönüştürürken neden önemlidir
Bir piksel değerini font-size için em'e dönüştürüyorsanız kullanmanız gereken temel değer, öğenin kendi yazı boyutu değil, üst öğenin yazı boyutudur. Birçok hata yanlış olanı kullanmaktan gelir. Padding ve margin gibi diğer özelliklerde temel değer öğenin kendi yazı boyutudur. Kural söylemesi kolay, unutması da kolaydır: font-size yukarı bakar, geri kalan her şey kendine bakar.
Sürprizlerden nasıl kaçınılır
Metni izleyen boşluklar için em, yazı boyutları için rem kullanın. Böylece yazı boyutları hiç birikmez, çünkü köke başvururlar, boşluklar ise yine kendi metinlerini izler. Çoğu modern stil sayfasının oturduğu birleşim budur.
Yaygın boyutlar
Sayfanın altındaki tablo
Dönüştürücünün altında, belirlediğiniz temel değerde yaygın boyutların bir tablosu vardır: 8 px, 0,5 em; 10 px, 0,625; 12 px, 0,75; 14 px, 0,875; 16 px, 1; 18 px, 1,125; 20 px, 1,25; 24 px, 1,5; 32 px, 2; 48 px, 3 ve 64 px, 4'tür. Temel değer 16 iken bunlar rem ile aynı sayılardır; insanların ikisini karıştırmasının nedeni budur. Fark, 16'nın neyi temsil ettiğindedir.
Temel değeri öğeye uyacak şekilde değiştirmek
Küçük bir düğme için temel değeri 14 yaparsanız tablo değişir: 14 px artık 1 em, 7 px 0,5 em ve 21 px 1,5 em olur. Deneyin; 1,5 em'lik bir iç boşluğun 14 px'lik bir düğmede 18 px'lik bir düğmeden nasıl farklı bir piksel boyutuna sahip olduğunu ve bunun neden yararlı olduğunu göreceksiniz.
px'i buradan em'e nasıl dönüştürürsünüz
Piksel değerini yazın
Boyutu piksel cinsinden ilk alana girin. Ondalık sayılar kabul edilir.
Em'in dayandığı yazı boyutunu belirleyin
Öğenin yazı boyutunu yazın; bir font-size dönüştürüyorsanız üst öğenin yazı boyutunu yazın. Emin değilseniz 16'yı bırakın ve sonuca yaklaşık bir değer olarak bakın.
Em değerini kopyalayın
Değeri CSS'inizde birimiyle birlikte kullanın; örneğin padding: 1.25em gibi. Birimsiz bir sayı çoğu özellik için geçerli değildir.
Bu birimler nereden geliyor
Metal dizgideki em
Em, web'den daha eskidir. Metal dizgide bu, dökülmüş bir bloğun genişliğiydi; adını büyük M harfinden alır ve basılı satırdaki yatay boşluğun doğal birimiydi. Dizgiciler bugün hâlâ em tireleri ve em boşluklarından söz eder. CSS'te bu fikir daha gevşek bir biçimde yaşar: bir em, geçerli yazı tipinin boyutudur.
Piksel ve rem
CSS pikseli, ekranınızdaki bir nokta değil, rahat bir okuma mesafesinden bakıldığında bir inçin yaklaşık 1/96'sı kadar bir referans uzunluktur. Rem, geliştiricilere göreli ama asla birikmeyen bir birim vermek için eklendi: kök öğenin em'idir. Piksel, em ve rem birlikte üç ihtiyacı karşılar: sabit boyut, metne göre boyut ve sayfaya göre boyut.
Em'in doğru seçim olduğu yerler
Düğmelerin ve form alanlarının içindeki iç boşluk
padding: 0.5em 1em olan bir düğme, her metin boyutunda oran olarak aynı görünür. Etiketi büyütün, bütün düğme onunla birlikte büyür; hem bir araç çubuğunda hem de bir ana banner'da kullanılabilecek bir bileşenden istediğiniz de budur.
Simgelerin yanındaki boşluk
Ardından bir alt yazı gelen bir simgenin, alt yazıyla birlikte ölçeklenen bir boşluğa ihtiyacı vardır. 0.4em'lik bir kenar boşluğu bunu yapar; 6px'lik bir kenar boşluğu yapmaz.
Başlıkların ve paragrafların çevresindeki kenar boşlukları
Bir belgede dikey ritmi korumak, paragraf aralığı em ile olduğunda daha kolaydır; çünkü aralık paragrafın boyutunu izler. Bir başlığın em cinsinden kenar boşluğu, başlık farklı kesme noktalarında boyut değiştirirken oranını korur.
Medya sorguları
Em ile yazılan kesme noktaları okuyucunun metin boyutuna yanıt verir; böylece metnini büyütmüş biri için düzen dar biçimine daha erken geçer. Medya sorgularında em, herhangi bir öğeye değil tarayıcının varsayılanına başvurur; bu yüzden birikmez.
px'i em'e dönüştürürken tuzaklar
Yanlış temel değeri kullanmak
En yaygın hata. font-size için üst öğenin boyutunu, geri kalan her şey için öğenin kendi boyutunu kullanın. Temel değeri yazmadan önce hangi özelliği dönüştürdüğünüzü kontrol edin.
Üst öğenin de em olabileceğini unutmak
Üst öğenin yazı boyutu da em ile yazılmışsa gerçek boyutu bilmek için zinciri yukarı doğru izlemeniz gerekir. Bir stil sayfası karmaşıklaştığında yazı boyutlarını rem'e çevirin ve em'i boşluklar için saklayın.
Bütün bir bileşen için tek bir değer beklemek
Farklı boyutlarda metin içeren bir bileşenin parçaları için tek bir em değeri yoktur. Her parçayı kendi temel değerine göre dönüştürün.
Aynı özellik için em ile rem'i karıştırmak
1rem'lik bir iç boşluğun yanında 1em'lik bir kenar boşluğu bulunması geçerlidir ve çoğu zaman kafa karıştırır. Yazı boyutları için rem, boşluklar için em gibi bir kural seçin ve ona bağlı kalın.
Dönüştürmeden önce insanların sorduğu sorular
16 px kaç em eder?
Geçerli yazı boyutu 16 px ise bir. Öğenin yazı boyutu 20 px ise 16 px, 0,8 em eder.
Em, rem'den daha mı iyi?
Hiçbiri daha iyi değil. Rem, yazı boyutları ve genel düzen için daha iyidir. Em, kendi metnini izlemesi gereken boşluklar için daha iyidir.
İç boşluğum neden beklediğimden büyük?
Çünkü öğenin yazı boyutuna göredir ve bu, sandığınızdan büyük olabilir. Tarayıcının geliştirici araçlarında hesaplanmış yazı boyutuna bakın.
Ondalık sayılar kullanabilir miyim?
Evet. 0.625em ve 1.333em gibi değerler normaldir.
Sayım yükleniyor mu?
Hayır. Aritmetik tarayıcınızda çalışır ve hiçbir yere hiçbir şey gönderilmez.
Nasıl geri dönerim?
Bölmek yerine çarpan em'den px'e dönüştürücüsüyle.
px'i em'e dönüştürürken akıllıca seçim yapmak
Değerin neye ait olduğuna karar verin
Metne aitse em doğrudur. Sayfaya aitse, örneğin bir sütun genişliği ya da bir bölüm boşluğu gibi, rem ya da bir görünüm alanı birimi daha uygundur. Px'ten vw'ye, bir boyutu ekran genişliğinin payı olarak ifade eder.
Niyeti bir yorum satırında yazın
padding: 0.75em 1.25em; /* 12px 20px at 16px */ gibi bir satır, gerekçeyi görünür kılar. Yazı boyutu daha sonra değiştiğinde sayıların ne olmak istediğini bileceksiniz.
Bileşenin yazı boyutunu tek bir yerde tutun
Yazı boyutunu bileşenin kök öğesinde belirleyin ve içindeki her şeyin ona başvurmasına izin verin. O zaman içerideki em değerleri bileşenin her yerinde aynı anlama gelir ve px'i tek bir temel değere göre em'e dönüştürebilirsiniz.
px'i em'e dönüştürürken iyi alışkanlıklar
px'i em'e her seferinde bir bileşen için dönüştürün
Bütün bir stil sayfası için px'i tek seferde em'e dönüştürmeye çalışmayın. Bir kart ya da bir düğme gibi tek bir bileşen alın, yazı boyutuna karar verin ve boşluk değerlerinin her birini bu boyuta göre dönüştürün. Bileşen bittiğinde iki ya da üç metin boyutunda test edin. Sonra bir sonrakine geçin.
Hesap makinesini yuvarlak değerler için değil, garip değerler için kullanın
8, 16 ve 24 piksel gibi değerler, temel değer 16 iken düzgün em sayılarına dönüşür. 22 ya da 13 gibi garip değerler uzun ondalıklar verir. Bunlar için px'i em'e dönüştürürken tasarımın gerçekten tam değere ihtiyaç duyup duymadığına, yoksa en yakın yuvarlak em değerinin de aynı derecede iyi olup olmayacağına karar verin. Tasarımcılar çoğu zaman yuvarlamaktan memnun olur ve derli toplu bir stil sayfasının bakımı daha kolaydır.
Temel değerin kaydını tutun
Her em değerinin yanında temel değerin ne olduğunu söyleyen kısa bir yorum, bir sonraki kişiye yardım eder. Biri bileşenin yazı boyutunu daha sonra değiştirirse, boşlukların ona tesadüfen değil bilerek uyduğunu anlayacaktır. Bunu bir kez yazmak, harcadığı zamana değer.
Rem karşılığıyla karşılaştırın
Bir değer için em mi rem mi uygun olduğundan emin değilseniz px'i em'e ve rem'e dönüştürün ve metin boyutu değiştiğinde ne olması gerektiğini sorun. Değer öğenin kendi metnini izlemeliyse em'i alın. Sayfayı izlemeliyse rem'i alın.
İlgili dönüştürücüler
Aynı araç ailesi komşu dönüşümleri de kapsar. Piksele geri dönmek için em'den px'e dönüştürücüsünü kullanın. Köke göre boyutlar için px'ten rem'e ve rem'den px'e, ekrana göre boyutlar için ise px'ten vw'ye ve vw'den px'e dönüştürücüleri vardır. Aynı stil sayfasının renkleri için HEX'ten RGB'ye ve HEX'ten HSL'ye dönüştürücüleri gösterimleri halleder.
Çalışılmış bir örnek
Bir düğme etiketinin 14 px olduğunu ve tasarımın düğmeye 10 px dikey, 20 px yatay iç boşluk verdiğini varsayın. Temel değer olarak 14 yazarsınız, 10 yazıp 0,714 em okursunuz, 20 yazıp 1,429 em okursunuz. Stil sayfasına padding: 0.714em 1.429em yazarsınız. Aynı düğme, etiketi 18 px olan bir ana bölümde kullanıldığında iç boşluk, orantılı olarak 12,9 px ve 25,7 px olur. 10px ve 20px yazmış olsaydınız, düğme daha büyük metnin çevresinde ince görünürdü.
Kısa bir kontrol listesi
Dönüştürmeden önce
Değerin hangi özelliğe ait olduğuna karar verin ve hangi yazı boyutuna göreli olması gerektiğini bulun.
Dönüştürürken
Piksel değerini ve doğru temel değeri yazın, em değerini birimiyle birlikte kopyalayın.
Dönüştürdükten sonra
Tarayıcıda bileşenin yazı boyutunu değiştirin ve boşlukların onu izlediğini kontrol edin. Biriken iç içe em değerlerine dikkat edin.
Sık yapılan hatalar
İç boşluk için temel değer olarak kök boyutunu kullanmak
Bu, rem'in işidir. Em, öğenin kendi yazı boyutuna başvurur.
Her yazı boyutu için em kullanmak
İç içe em yazı boyutları birikir ve sizi şaşırtır. Yazı boyutları için rem kullanın.
Görsel olarak derli toplu ama yanlış bir sayıya yuvarlamak
1,43, büyük bir yazı boyutuyla çarpıldığında 1,5 ile aynı değildir. Yeterli sayıda basamak tutun.
Sayılarınız cihazınızda kalır
Hesaplama yerel olarak yapılır. Değerleriniz kendi tarayıcınız tarafından kullanılır ve hiçbir yere hiçbir şey gönderilmez. Sonradan silinecek bir şey yoktur ve oluşturulacak bir hesap da yoktur. px'i em'e dönüştürmenin sade yolu budur.
Özet
px'i buradan em'e dönüştürmek için pikseldeki boyutu ve göreli olduğu yazı boyutunu yazın ve sonucu hemen okuyun; formül em = px ÷ temel değerdir. Dönüşüm, değerin kullanıldığı yerde geçerli olan yazı boyutuna göre oranı korur. Bir sayfa için tek bir cevap veremez: em, öğenin kendi yazı boyutuna göre (font-size için üst öğeninkine göre) göreli olduğundan aynı 1,5 em, 16 px'lik bir öğenin içinde 24 px, 24 px'lik bir öğenin içinde 36 px eder ve em içinde em çarpılır. Her yerde geçerli tek bir sayı için rem kullanın. Hiçbir şey yüklenmez.