rem birimini px birimine çevirin Root em ↔ Pixels Ücretsiz Çevrimiçi Güvenli
rem cinsinden bir değer yazın, karşılığını hemen px 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 — rem birimini px birimine çevirin
| rem | px |
|---|---|
| 0.5 | 8 |
| 0.75 | 12 |
| 1 | 16 |
| 1.25 | 20 |
| 1.5 | 24 |
| 2 | 32 |
| 2.5 | 40 |
| 3 | 48 |
| 4 | 64 |
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.
rem'i neden px'e dönüştürmeniz gerekir
Bir stil sayfası açarsınız ve bir kartta padding: 2.25rem, bir alt yazıda font-size: 0.8125rem görürsünüz. Bunlar modern CSS'in yazılması gerektiği gibi yazılmış iyi değerlerdir ve bir bakışta size hiçbir şey söylemezler. O kart iç boşluğu ekranda ne kadar büyük? Alt yazı okunabilir olacak mı? Size verilen tasarım dosyasındaki 36 px ve 13 px ile uyuşuyor mu? Cevaplamak için rem'i px'e dönüştürürsünüz: kök yazı boyutuyla çarpar ve cevabı tasarım araçlarının kullandığı birimde okursunuz. Bu, olağan yönün tersidir ve kod okurken, bir maketi bir yapıyla karşılaştırırken ya da bir düzeni pikselle düşünen birine açıklarken yaptığınız şeydir.
Dönüşüm kolaydır; ona bir sayfa ayırmaya değer kılan temel değerdir. Rem bir boyut değil, bir boyutun, yani kök öğenin yazı boyutunun katıdır. Kimsenin aksini söylemediği bir tarayıcıda bu boyut 16 px'tir, yani 1 rem, 16 px; 2,25 rem, 36 px ve 0,8125 rem, 13 px eder. Ama kök stil sayfası tarafından değiştirilebilir ve okuyucu onu tarayıcıda değiştirebilir; o zaman sayfadaki her rem değeri onunla birlikte kayar. Bu yüzden sayfa, temel değeri gizlemek yerine ister ve kullanır.
Hesaplama tarayıcınızda yapılır ve hiçbir şey yüklenmez. Aşağıda formülü, yaygın değerlerin bir tablosunu, dönüşümün neyi koruduğunu ve neyi koruyamadığını, geliştiricilerin rem'i px'e dönüştürmeye ihtiyaç duyduğu durumları ve rem tabanlı bir stil sayfasını okunaklı tutan birkaç alışkanlığı bulacaksınız.
Formül ve temel değer
px, rem ile temel değerin çarpımına eşittir
Formül tek bir çarpmadır: px = rem × temel değer. Olağan 16 px temel değeriyle 1,5 rem, 24 px; 0,75 rem, 12 px ve 4 rem, 64 px olur. Sayfa temel değeri sonucun yanında yazdırır; böylece 1,5 rem = 24 px (16 px) gibi bir satır neyi varsaydığını söyler ve projenizle uyuşup uyuşmadığını hemen görebilirsiniz.
Temel değerinizi bulmak
Stil sayfasında html ya da :root üzerinde font-size belirleyen bir kural arayın. Yoksa temel değer tarayıcı varsayılanı olan 16 px'tir. Varsa, örneğin yüzde 62,5 ise 16'nın o yüzdesini alın: yüzde 62,5, 10 px verir. Tarayıcının geliştirici araçlarında kök öğeyi seçip hesaplanmış yazı boyutunu da okuyabilirsiniz; temel değer alanına yazılacak sayı budur.
Kök boyutu akışkan olduğunda
Bazı siteler kök boyutunu bir clamp ifadesi kullanarak pencereyle birlikte büyütür. O zaman 1 rem'in tek bir piksel değeri hiç yoktur: telefonda 15 px, geniş bir monitörde 18 px'tir. Bu durumda her dönüşüm bir anlık görüntüdür. İlgilendiğiniz genişlikte gördüğünüz temel değeri yazın ve cevabın yalnızca o genişlikte geçerli olduğunu anlayın.
Dönüşümün koruduğu ve koruyamadığı şeyler
Oranı korur
Bir rem, kök yazı boyutu neyse odur; bu yüzden rem ile yazılmış bir düzen, bu boyut değiştiğinde biçimini korur. rem'i px'e dönüştürdüğünüzde piksel değeri, belirli bir temel değer için somutlaştırılmış aynı orandır. İki boyut arasındaki oran, örneğin 1 rem'lik gövde metninin üzerinde 2 rem'lik bir başlık, nasıl dönüştürürseniz dönüştürün değişmez ve iyi bir düzenin dayandığı şey bu orandır.
Okuyucunuzun ayarlarını bilemez
Sayı tamamen temel değere bağlıdır. Okuyucu tarayıcısının varsayılan metin boyutunu yükseltmişse (birçok kişi bunu yapar ve buna hakkı vardır) 1 rem onlar için 16 px değildir ve gördüğünüz değer yalnızca alandaki temel değer için doğrudur. Piksel değerini her ziyaretçinin ne göreceğinin sözü olarak değil, tasarımı anlamanın bir yolu olarak görün.
Yuvarlama
Temel değer genellikle tam sayı olduğundan çarpmanın sonucu genellikle tamdır. 16 temel değerinde 0,8125 rem tam olarak 13 px'tir; 0,6875 rem tam olarak 11 px'tir. Uzun bir ondalık çıkarsa bu, rem değerinin yazdığınızdan farklı bir temel değerden hesaplandığının işaretidir.
Yaygın değerler
Sayfanın altındaki tablo
Sayfa, belirlediğiniz temel değerde yaygın rem rakamlarının karşılık geldiği piksel değerlerinin bir tablosunu içerir: 0,5 rem, 8 px; 0,625, 10; 0,75, 12; 0,875, 14; 1, 16; 1,125, 18; 1,25, 20; 1,5, 24; 2, 32; 3, 48 ve 4, 64'tür. Bunlar boşluk ve yazı ölçeklerinde en sık karşınıza çıkan değerlerdir ve onları ezbere bilmek bir stil sayfasını bir bakışta okunaklı kılar.
Bir stil sayfasını pikselle okumak
Yararlı bir alıştırma, yazmadığınız bir stil sayfasını almak ve ana değerlerini bir kez piksele çevirip sonuçları bir nota yazmaktır. 1 rem'lik gövde boyutu, 1,5 ve 2,25 rem'lik başlıklar, 2 rem'lik bir kapsayıcı aralığı: pikselle 16, 24, 36 ve 32. Bu şekilde bakıldığında tasarımın mantığı ortaya çıkar ve onu hesap makinesi olmadan tasarım dosyasıyla karşılaştırabilirsiniz.
rem'i buradan px'e nasıl dönüştürürsünüz
Rem değerini yazın
Boyutu rem cinsinden ilk alana girin. Ondalık sayılar kabul edilir; yani 0,8125 de 1 kadar işe yarar.
Temel değeri belirleyin
CSS'iniz kök boyutunu değiştirmiyorsa 16'da bırakın. Değiştiriyorsa değiştirin. Sonuç siz yazdıkça güncellenir.
Piksel değerini okuyun
Cevap, yanında gösterilen temel değerle birlikte hemen görünür; böylece neyin varsayıldığını anlayabilirsiniz. Notlarınıza kopyalayın ya da tasarım dosyasıyla karşılaştırın.
Bu birimler nereden geliyor
CSS pikseli
Ekranlar öngörülebilir bir yoğunluğa sahip olmaktan çıkınca, gerçek piksellerle ölçülen 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 bakıldığında bir inçin yaklaşık 1/96'sı. Bu nedenle bir stil sayfasındaki piksel, ekranınızdaki bir nokta değil, tarayıcının ekranın ihtiyaç duyduğu kadar noktaya eşlediği bir uzunluk birimidir.
Rem
Em, web'den daha eskidir: metal dizgide dökülmüş bir bloğun genişliğiydi, adını büyük M harfinden alır ve CSS'te geçerli yazı boyutu anlamına gelir; öğeleri iç içe yerleştirdikçe değişmesinin nedeni de budur. Rem tam olarak bundan kaçınmak için eklendi: kök öğenin em'idir ve asla birikmez. Farkı sayılarla görmek için px'i em'e dönüştürün ve rem'i px'e dönüştürdüğünüzde elde ettiğinizle karşılaştırın.
Geliştiriciler rem'i px'e ne zaman dönüştürür
Bir yapıyı tasarım dosyasıyla karşılaştırmak
Bir tasarımcı bir dosyayı piksel olarak teslim eder; geliştirici kodu rem ile yazmıştır. Sayfanın uyuştuğunu kontrol etmek için rem'i px'e dönüştürüp sayıları karşılaştırır. Uyumsuzluk hemen ortaya çıkar: 1,375 rem, 22 px'tir ve tasarım 24 diyorsa ikisinden biri yanlıştır.
Tanımadığınız kodu okumak
Bir stil sayfasını devraldığınızda rem değerleri gerçek boyutları gizler. Ana olanlardan bir avuç tanesini çevirmek size tasarımın bir haritasını verir: yazı ne kadar büyük, oluklar ne kadar geniş, kesme noktaları nereye düşüyor.
Hata raporları ve belge yazmak
Bir sayfayı test edenler gördüklerini pikselle anlatır. İç boşluğun 2,5 rem olduğunu söyleyen bir geliştirici bir test uzmanı için pek bir şey ifade etmez; 40 px bir şey ifade eder. Dönüştürmek iki tarafın birbirini anlamasını sağlar.
Pikselde tam olması gereken değerleri belirlemek
Bazı şeylerin tam bir cihaz pikseli sayısı olması gerekir, yoksa yumuşak görünürler: bir piksellik kenarlık, 24 px'lik bir ızgara üzerine çizilmiş bir simge. Bir boyutun piksel ızgarasına oturması gerekiyorsa rem'i px'e dönüştürmek, temel değerinizde oturup oturmadığını söyler.
rem'i px'e dönüştürürken tuzaklar
Değiştirilmiş bir kök boyutunu unutmak
Kök yüzde 62,5'e ya da bir clamp ifadesine ayarlanmışsa 16'lık standart çarpan geçerli olmaz. Sonuç, iki temel değerin oranı kadar yanlıştır. Her zaman önce temel değeri kontrol edin.
Rem'i em ile karıştırmak
Em, köke değil, öğenin kendi yazı boyutuna göredir. 24 px'lik bir başlığın içindeki 1.5em değeri 36 px'tir, ama 16 px'lik bir paragrafın içinde 24 px'tir. Bu sayfa böyle bir belirsizliği olmayan rem'i dönüştürür. Em için em'den px'e sayfasına bakın.
Ekranın aynı pikselleri gösterdiğini varsaymak
Bir CSS pikseli bir cihaz pikseli değildir. Yüksek yoğunluklu bir ekranda bir CSS pikseli iki ya da üç cihaz pikseli olabilir. Dönüşüm, tasarım araçlarının ve stil sayfasının ikisinin de kullandığı CSS piksellerini verir.
Çok erken yuvarlamak
13,333 px'i 13'e yuvarlayıp sonra geri çevirirseniz başladığınız 0,8333'ü değil, 0,8125 rem'i elde edersiniz. Önemli olduğunda orijinal rem değerini koruyun.
Dönüştürmeden önce insanların sorduğu sorular
1 rem kaç pikseldir?
Varsayılanı değiştirilmemiş bir tarayıcıda on altı.
2 rem kaç pikseldir?
Varsayılan temel değerde otuz iki. 10 temel değerinde 20 olurdu.
Tarayıcım neden farklı bir şey gösteriyor?
Okuyucunun ayarı ya da stil sayfasındaki bir kural kök boyutunu değiştirmiştir. Geliştirici araçlarında kök öğenin hesaplanmış yazı boyutuna bakın.
Rem, em ile aynı mı?
Hayır. Rem kök öğeye, em ise öğenin kendisine başvurur.
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?
Çarpmak yerine bölen px'ten rem'e dönüştürücüsüyle.
Bir rem stil sayfasını okunaklı kılan alışkanlıklar
Piksel değerini bir yorum satırına yazın
gap: 1.5rem; /* 24px */ gibi bir satır birkaç karaktere mal olur ve bir sonraki okuyucuyu bir dönüşümden kurtarır. Ayrıca varsaydığınız temel değeri de kaydeder.
Küçük bir ölçek kullanın
Yalnızca 0,5; 1; 1,5; 2 ve 3 gibi bir avuç rem değeri kullanan bir proje öğrenmesi kolaydır: bir gün sonra onları düşünmeden pikselle bilirsiniz. Böyle bir stil sayfası için rem'i px'e dönüştürdüğünüzde yalnızca hatırladığınızı doğruluyorsunuz.
Değerlerinize ad verin
--space-md: 1.5rem gibi özel özelliklerle stil sayfası sayılar yerine niyeti anlatır. Ad anlamı taşır ve sayı tek bir yerde durur.
Farklı bir varsayılan boyutla test edin
Tarayıcınızda varsayılan metin boyutunu yükseltin ve sayfaya bakın. Bir arada duruyorsa düzen gerçekten rem ile kurulmuştur. Bozuluyorsa bir şey pikselde bırakılmıştır.
rem'i px'e dönüştürdükten sonra piksel değerini iyi kullanmak
Yalnızca sayıları değil, oranları karşılaştırın
Bütün bir stil sayfası için rem'i px'e dönüştürdüğünüzde, boyutların kendisine olduğu kadar aralarındaki oranlara da bakın. Her adımın bir öncekinin yaklaşık 1,25 katı olduğu bir yazı ölçeği 16, 20, 25, 31 ve 39 piksel verir; 1,5'lik bir ölçek 16, 24, 36 ve 54 verir. Oranı fark etmek tasarımcının neyi amaçladığını söyler ve yeni bir boyuta ihtiyaç duyduğunuzda ölçeği tutarlı biçimde genişletmenize izin verir.
Pikselle düşünen insanlar için çevirin
Bir ekipteki herkes rem okumaz. Proje yöneticileri, metin yazarları ve müşteriler çoğu zaman ekran görüntülerinden çalışır ve bir başlığın biraz daha büyük olmasını ister. Başlığın şimdi 36 px olduğunu ve 2,5 rem'de 40 px olacağını söyleyebilirseniz konuşma kısa sürer. Sayfa, iki sözlük arasında hızlı bir köprü olarak yararlıdır.
Dokunma hedeflerini ve asgari boyutları kontrol edin
Dokunmatik ekran yönergeleri en az yaklaşık 44 px'lik hedefler ister ve metin yönergeleri 16 px ya da daha büyük bir gövde metni ister. İkisi de pikselle ifade edilir. Rem ile yazılmış bir stil sayfasını bunlara göre doğrulamak için rem'i px'e dönüştürün ve düğmelerin ve metnin çizgiyi aşıp aşmadığına bakın.
Yakınlaştırılmış durumu da düşünün
Aldığınız değer, yazdığınız temel değer içindir. Okuyucularınız metni büyütebiliyorsa dönüşümü 20 ya da 24 temel değeriyle yeniden deneyin ve düzenin ekrandan ne istediğine bakın. 16'da rahat olan bir kart 24'te taşabilir ve bunu öğrenmenin en iyi zamanı sayfa yayımlanmadan öncedir.
İlgili dönüştürücüler
Aynı araç ailesi komşu dönüşümleri de kapsar. Rem'e geri dönmek için px'ten rem'e dönüştürücüsünü kullanın. Öğeye göre boyutlar için px'ten em'e ve em'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ındaki renkler için HEX'ten RGB'ye ve HSL'den HEX'e dönüştürücüleri elinizin altındadır; sınıf adları için metinden kebab-case'e dönüştürücüsü bir ifadeyi CSS'in kabul ettiği bir ada çevirir.
Çalışılmış bir örnek
Bir çekme isteğini incelediğinizi ve stil sayfasında padding: 5rem 1.5rem olan bir ana bölüm, 3.5rem bir başlık ve 1.25rem bir giriş paragrafı olduğunu varsayın. Tasarım dosyası 80 px ve 24 px iç boşluk, 56 px başlık ve 20 px giriş diyor. 5 yazıp 80 px okursunuz, 1,5 yazıp 24 okursunuz, 3,5 yazıp 56 okursunuz, 1,25 yazıp 20 okursunuz. Dördü de uyuşur, yani yapı sadıktır. Başlık 3.25 rem olsaydı 52 okurdunuz ve farkı tasarımcıya ulaşmadan fark ederdiniz.
Kısa bir kontrol listesi
Dönüştürmeden önce
Temel değeri bulun: stil sayfasındaki kök kural ya da geliştirici araçlarındaki hesaplanmış boyut.
Dönüştürürken
Rem değerini yazın, sonucun yanında gösterilen temel değeri kontrol edin ve piksel rakamını not edin.
Dönüştürdükten sonra
Tasarım dosyasıyla karşılaştırın. Sayılar farklıysa koddan şüphelenmeden önce temel değeri kontrol edin.
Sık yapılan hatalar
16'yı kontrol etmeden kullanmak
Bu bir varsayılandır, bir kural değil. Kökü kontrol edin.
Pikselleri nihai saymak
Cevap bir temel değer için geçerlidir. Daha büyük bir varsayılana sahip bir okuyucu daha büyük pikseller görür.
Rem ile em'i karıştırmak
Benzer görünürler ve farklı davranırlar. Her biri için doğru sayfayı kullanın.
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. rem'i px'e dönüştürmenin sade yolu budur.
Özet
rem'i buradan px'e dönüştürmek için boyutu rem olarak yazın ve hemen piksel olarak okuyun; formül px = rem × temel değerdir. Temel değer, bir tarayıcının varsayılanı olan 16 px ile başlar ve CSS'inize uyacak şekilde değiştirebilirsiniz. Dönüşüm oranı korur, çünkü bir rem kök yazı boyutu neyse odur ve okuyucunuzun ayarlarını bilemez; bu yüzden değer yalnızca alandaki temel değer için doğrudur. 8 px'teki 0,5 rem'den 64 px'teki 4 rem'e kadar yaygın değerler tablosu bir stil sayfasını bir bakışta okumanıza yardımcı olur. Hiçbir şey yüklenmez.