px birimini rem birimine çevirin Pixels ↔ Root em Ücretsiz Çevrimiçi Güvenli
px cinsinden bir değer yazın, karşılığını hemen rem 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 rem birimine çevirin
| px | rem |
|---|---|
| 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.
Tasarımcılar ve geliştiriciler px'i neden rem'e dönüştürür
Tasarım araçları pikselle konuşur. Bir maket, başlığın 32 px, bölümler arasındaki boşluğun 48 px, düğmenin iç boşluğunun 16 px olduğunu söyler. Stil sayfaları ise iyi yazıldığında rem ile konuşur. Bu sayfa, o iki dil arasındaki boşlukta durur: boyutu piksel olarak yazarsınız ve rem olarak okursunuz; böylece CSS'e koyduğunuz sayı tasarımcının kastettiği anlama gelir. px'i rem'e dönüştürmek küçük bir iştir, ama bir web sitesinin ömrü boyunca yüzlerce kez yapılır ve yanlış bir temel değer, özenle hazırlanmış bir düzeni her yerde aynı anda biraz yanlış hale getirir.
Rem ile uğraşmanın nedeni erişilebilirlik ve esnekliktir. Rem, bir tarayıcının aksi söylenmedikçe 16 px olarak belirlediği ve okuyucunun ayarlarından değiştirmekte özgür olduğu kök yazı boyutunun bir katıdır. Bu yüzden rem ile yazılmış bir düzen, görme sorunu olan biri varsayılan metin boyutunu yükselttiğinde biçimini korur: yazı, boşluklar ve kutular birlikte büyür. Piksel ile yazılmış bir düzen ise izlemez; daha büyük metin isteyen okuyucu, sıkışık kutular içinde daha büyük harfler alır ya da hiçbir şey alamaz. Bu yüzden neredeyse her modern stil rehberi aynı şeyi söyler: yazı ve boşluklar için rem kullanın.
Bu sayfa aritmetiği tarayıcınızda yapar. Hiçbir şey yüklenmez ve dönüşümün bağlı olduğu şey, yani temel boyut, arkanızdan varsayılmak yerine aşağıda yazılıdır ve değiştirebileceğiniz bir alanda durur. Aşağıda formülü, yaygın boyutların tablosunu, temel değerin neden önemli olduğunu, px'i aceleyle rem'e dönüştürenleri yakalayan tuzakları ve sonucu gerçek stil sayfalarında kullanmak için kısa bir rehberi bulacaksınız.
Formül ve temel değer
rem, px'in temel değere bölünmesine eşittir
Formül tek bir bölmedir: rem = px ÷ temel değer. Olağan 16 px temel değeriyle 24 px, 1,5 rem olur; 32 px, 2 rem olur; 8 px, 0,5 rem olur. Sayfa sonucu siz yazdıkça gösterir ve kullandığı temel değeri de gösterir; bu yüzden 24 px = 1,5 rem (16 px) satırı neyin varsayıldığını size tam olarak söyler.
16 nereden geliyor
Temel değer 16 px ile başlar, çünkü kimse aksini söylemediğinde bir tarayıcının kullandığı budur. Bu, web'in bir yasası değildir; varsayılanın varsayılanıdır ve onlarca yıldır sabittir. CSS'iniz kök yazı boyutuna hiç dokunmuyorsa 1 rem, çoğu ziyaretçi için 16 px'tir. Dokunuyorsa temel değer, ne ayarladıysanız odur.
Yüzde 62,5 hilesi ve insanlar neden kullanır
Bazı stil sayfaları kök boyutunu yüzde 62,5 olarak ayarlar; bu, varsayılan bir tarayıcıda 1 rem'i 10 px'e eşitler, böylece 24 px basitçe 2,4 rem olur ve aritmetiği kafadan yapmak kolaylaşır. İşe yarar, ama bir bedeli vardır: bütün sayfa artık o yüzdeye bağlıdır ve temel değerin 16 olmasını bekleyen her bileşen fazla küçük çıkar. Projeniz bunu yapıyorsa bu sayfanın temel değer alanına 10 yazın; her değer CSS'inizle uyuşacaktır.
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. Bu şekilde yazmanın bütün nedeni budur. px'i rem'e dönüştürdüğünüzde elde ettiğiniz sayı, piksel değerinin seçtiğiniz temel değerde sahip olduğu orandır; yalnızca artık ölçeklenen bir biçimde ifade edilir.
Okuyucunuzun ayarlarını bilemez
Sayı tamamen temel değere bağlıdır. CSS'iniz kök öğede farklı bir boyut belirliyorsa ya da okuyucu tarayıcısında varsayılan metin boyutunu değiştirmişse (birçok kişi bunu yapar ve buna hakkı vardır), 1 rem onlar için 16 px değildir. Sayfadaki değer yalnızca alandaki temel değer için doğrudur. Bu, aracın bir kusuru değil, birimin doğasıdır: göreli bir birimdir ve göreli bir birimin dönüştürülecek sabit bir değeri yoktur.
Yuvarlama
16'ya bölme, birçok yaygın boyut (16, 24, 32, 48, 64) için düzgün sonuçlar, diğerleri için devreden ondalıklar verir (10 px, 0,625 rem; 13 px, 0,8125). Sayfa, sayının gerektirdiği kadar basamak verir ve stil sayfasında kaçını tutacağınıza siz karar verirsiniz. Tarayıcılar uzun ondalıkları sorunsuz işler, ama 0.8125rem gibi yuvarlanmış bir değeri okumak ve bakımını yapmak, on basamaklı bir değerden daha kolaydır.
Yaygın boyutlar
Sayfanın altındaki tablo
Dönüştürücünün altında yaygın boyutların bir tablosunu bulursunuz: 8 px, 0,5 rem; 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. Bunlar yazı ölçeklerinde ve boşluk sistemlerinde en sık karşınıza çıkan boyutlardır ve onları önünüzde görmek bir dönüşümden tasarruf sağlar.
Rem üzerine kurulu bir ölçek
Yararlı bir alışkanlık, küçük bir rem değerleri kümesi seçip onları yeniden kullanmaktır: boşluklar için 0,5; 1; 1,5; 2; 3 ve 4, yazı için 0,875; 1; 1,25; 1,5; 2. Tasarımcılar buna ölçek der ve bir sitenin görsel olarak tutarlı kalmasını sağlar. Bir maket size 22 px gibi garip bir değer verdiğinde bunun 1,375 rem olduğunu görmek için dönüştürücüyü kullanın, sonra ölçeğinizdeki en yakın değere yuvarlayıp yuvarlamayacağınıza karar verin.
px'i buradan rem'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; yani 13,5 px de 14 kadar işe yarar.
Temel değeri kontrol edin
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.
Rem değerini kopyalayın
Değeri okuyun ve CSS'inizde birimi sonuna yazarak kullanın: font-size: 1.5rem. Birimi unutmayın, çünkü çıplak bir sayı çoğu özellikte başka bir anlama gelir.
Bu birimler nereden geliyor
CSS pikseli, ekranınızın pikseli değildir
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 sayfadaki her şey bunun üzerine kuruludur. 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.
Rem neden var
Rem'den önce geliştiriciler her şeyi em ya da yüzde ile boyutlandırıyordu ve iç içe öğeler birbirini çarpıyordu: bir listenin içindeki bir listenin içindeki bir liste, her düzeyde küçülüyor ya da büyüyordu. Rem onlara sabit tek bir referans, yani kökü verdi ve birikmeyi ortadan kaldırdı. İkisini karşılaştırmak isterseniz px'i em'e dönüştürün ve aynı piksel değerinin içinde bulunduğu öğeye nasıl bağlı olduğunu görün.
Rem ile pratikte nerede karşılaşırsınız
Yazı
Gövde metni genellikle 1 rem, başlıklar 1,25 ila 3 rem, küçük yazılar 0,75 ila 0,875 rem'dir. Bunları rem ile yazmak, okuyucunun tek bir tarayıcı ayarını değiştirerek bütün sayfayı büyütmesine izin verir.
Boşluk ve düzen
Rem cinsinden kenar boşlukları, iç boşluklar ve aralıklar, boşluğu yazıyla orantılı tutar. Metin büyüdüğünde çevresindeki boşluk da büyür ve düzen, daha büyük harfleri eski kutulara sıkıştırmak yerine dengeli kalır.
Medya sorguları
Em ya da rem 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. Bilmeye değer bir inceliktir, ancak kesme noktalarında pikseller yaygın olmaya devam eder.
Pikselde bırakılması gerekenler
Çok ince çizgiler, kutu gölgeleri ve ince simgeler çoğu zaman sabit piksel boyutlarında en iyi görünür; çünkü büyük metinle 0.1rem'e büyüyen 0.0625rem'lik bir kenarlık kimseye yardım etmez. Ölçeklenmesi gerekenler için rem, ölçeklenmemesi gerekenler için piksel kullanın.
px'i rem'e dönüştürürken tuzaklar
Temel değerin her zaman 16 olmadığını unutmak
Bir proje html { font-size: 62.5% } ayarlıyorsa ya da akışkan bir kök boyutu kullanıyorsa çarpan farklıdır. Bu araç dahil, herhangi bir dönüştürücüden gelen bir sayıya güvenmeden önce stil sayfasını kontrol edin.
Kök boyutunun kendisini dönüştürmek
Kök boyutunu piksel olarak belirlerseniz okuyucunun tarayıcı ayarı geçersiz kılınır ve rem'in yararı kaybolur. Kökü yüzde olarak belirleyin ya da dokunmayın; böylece kullanıcının tercihine saygı gösterilir.
Kendi yazı boyutunu belirleyen bir bileşenin içinde rem kullanmak
Rem her zaman köke başvurur, bileşene değil. Yazı boyutu 14 px ve iç boşluğu 1rem olan bir düğmenin iç boşluğu, düğmenin kendi metnini izlemez. Öğenin metnini izleyen bir boşluk istiyorsanız bu, em'in işidir.
Birimleri plansız karıştırmak
Bir kenar boşluğu için px, sonrakine rem, üçüncüsüne em kullanan bir stil sayfası üzerinde akıl yürütmek zordur. Bir kural seçin: yazı ve boşluklar için rem, kenarlıklar ve gölgeler için piksel; ve ona bağlı kalın.
Dönüştürmeden önce insanların sorduğu sorular
16 px kaç rem eder?
Varsayılan bir tarayıcıda bir. On altı, on altılık temel değere bölünür.
Rem, px'ten daha mı iyi?
Yazı ve boşluklar için çoğu projede daha iyi seçimdir, çünkü okuyucunun ayarlarına saygı gösterir. Pikseller, ölçeklenmemesi gereken şeyler için doğru olmaya devam eder.
Sonucum neden başka bir siteden farklı?
Büyük olasılıkla temel değer farklıdır. Alana bakın: bazı araçlar 10, bazıları 16, bazıları 14 varsayar. Bu sayfa temel değeri sonucun yanında gösterir.
Yuvarlamak zorunda mıyım?
Hayır. Tarayıcılar uzun ondalıkları kabul eder. Yalnızca okunabilirlik için yuvarlayın.
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 rem'den px'e dönüştürücüsüyle.
px'i rem'e dönüştürürken akıllıca seçim yapmak
Proje için bir temel değere karar verin ve ona bağlı kalın
Ne seçerseniz seçin, bunu bir karar haline getirin ve projenin belgelerine yazın. Temel değer konusunda anlaşamayan bir ekip, birbirine uymayan bileşenler üretir.
Son anda değil, tasarım aşamasında dönüştürün
px'i rem'e maketi okurken dönüştürürseniz ölçeği tasarımın içine yerleştirirsiniz ve garip değerleri erken fark edersiniz. Bunu sonda yaparsanız onları tutarsız sayılardan oluşan bir yığın olarak keşfedersiniz.
Görünüm alanı birimlerini de düşünün
Ekranı doldurması gereken başlıklar için px'ten vw'ye dönüşüm, bir boyutu görünüm alanının payı olarak ifade eder. Rem'den farklı ölçeklenir ve ikisi çoğu zaman birleştirilir.
px'i rem'e dönüştürmeyi kolaylaştıran alışkanlıklar
Kafanızda bir dönüşüm tablosu tutun
Temel değer 16 iken birkaç dayanak noktası işin çoğunu karşılar: 4 px, 0,25 rem; 8 px, 0,5; 12 px, 0,75; 16 px, 1; 24 px, 1,5 ve 32 px, 2'dir. Bir maket size bunların arasında bir değer verdiğinde, sayfada px'i rem'e dönüştürmeden önce tahmin edebilir ve dönüştürücüyü yalnızca doğrulamak için kullanabilirsiniz. Birkaç hafta sonra tabloyu bakmadan bilirsiniz.
İşi tasarım sistemi yapsın
Ekibiniz spacing-2 ya da font-lg gibi tasarım belirteçleri tutuyorsa bunları bir kez rem olarak saklayın ve herkesin adlara başvurmasına izin verin. O zaman kimsenin px'i yeniden rem'e dönüştürmesi gerekmez ve ölçekte yapılacak bir değişiklik tek bir yerde yapılır. Dönüştürücü, belirteçleri yazarken kullandığınız araçtır; onları kullanırken değil.
Piksel değerini bir yorum satırına yazın
padding: 1.25rem; /* 20px */ gibi bir satır birkaç karaktere mal olur ve bir sonraki geliştiriciyi hesap makinesine uzanmaktan kurtarır. Ayrıca hangi temel değeri varsaydığınızı da kaydeder; kök boyutu daha sonra değiştirilirse bu işe yarar.
Değiştirilmiş bir tarayıcı ayarıyla test edin
Bir sayfanın rem ile kurulduğunun kanıtı, daha büyük bir varsayılan metin boyutuna dayanmasıdır. Tarayıcınızda ayarı değiştirin, yeniden yükleyin ve bakın. Bozulan bileşenler, bir şeyin pikselde bırakıldığı ya da sabit bir yüksekliğin metni kestiği bileşenlerdir.
İlgili dönüştürücüler
Aynı araç ailesi komşu dönüşümleri de kapsar. Piksele geri dönmek için rem'den px'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. İşiniz boyutların yanı sıra renkleri de içeriyorsa HEX'ten RGB'ye, RGB'den HEX'e ve HEX'ten HSL'ye dönüştürücüleri stil sayfasının gösterimlerini halleder.
Çalışılmış bir örnek
Bir maketin kart başlığını 28 px, kart iç boşluğunu 20 px ve kartlar arasındaki aralığı 12 px verdiğini ve projenizin varsayılan 16 px temel değerini kullandığını varsayın. 28 yazıp 1,75 rem okursunuz, 20 yazıp 1,25 rem okursunuz, 12 yazıp 0,75 rem okursunuz. Stil sayfasına font-size: 1.75rem, padding: 1.25rem ve gap: 0.75rem yazarsınız. Tarayıcı metin boyutunu 20 px'e yükselten bir ziyaretçi aynı kartı, dörtte bir oranında ölçeklenmiş olarak görür: başlık 35 px, iç boşluk 25 px ve aralık 15 px olur; hepsi orantılıdır. Piksel yazmış olsaydınız başlık 28'de kalırdı ve kart yanlış görünürdü.
Kısa bir kontrol listesi
Dönüştürmeden önce
CSS'inizin kullandığı temel değeri öğrenin. Hangi boyutların ölçeklenmesi, hangilerinin ölçeklenmemesi gerektiğine karar verin.
Dönüştürürken
Piksel değerini yazın, sonucun yanında gösterilen temel değeri kontrol edin ve rem değerini birimiyle birlikte kopyalayın.
Dönüştürdükten sonra
Sayfayı tarayıcıda daha büyük bir varsayılan metin boyutuyla test edin ve artık metnini tutmayan kutulara bakın.
Sık yapılan hatalar
1 rem'in her zaman 16 px olduğunu varsaymak
Yalnızca kimse kök boyutunu değiştirmemişse öyledir ve bazı okuyucular değiştirmiştir. Düzeni diğer boyutlarda da çalışacak şekilde yazın.
Kök boyutunu piksel olarak belirlemek
Okuyucunun tercihini geçersiz kılar. Yüzde kullanın ya da belirlemeyin.
Her şeyi dönüştürmek
Her boyut ölçeklenmemelidir. Kenarlıkları ve gölgeleri pikselde bırakı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. px'i rem'e dönüştürmenin sade yolu budur.
Özet
px'i buradan rem'e dönüştürmek için boyutu piksel olarak yazın ve hemen rem olarak okuyun; formül rem = px ÷ 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: rem ile yazılmış bir düzen, kök yazı boyutu değiştiğinde biçimini korur. Okuyucunuzun ayarlarını bilemez; bu yüzden değer yalnızca alandaki temel değer için doğrudur. Dönüştürücünün altındaki tabloda yer alan, 0,5 rem'de 8 px'ten 4 rem'de 64 px'e kadar yaygın boyutlar aritmetiği yinelemekten sizi kurtarır. Hiçbir şey yüklenmez.