PX-REM Dönüştürücü
Px'i rem'e çevirmek için piksel değerini kök yazı tipi boyutuna bölün: rem = px / kök. Tarayıcının varsayılan kök boyutu 16px iken 24px / 16 = 1.5rem olur. Aşağıdaki temeli değiştirin – Ant Design için 14px, %62,5 numarası için 10px – rem ve em değerleri onu izler; punto değeri ise piksellere bağlıdır, çünkü 1px her zaman 0,75pt eder.
px, rem, em ve pt dönüştürün ve CSS değişikliklerini inceleyin.
Pozitif kök; mutlak değer ≤1 milyar; altı ondalığa yuvarlanır. Önizleme 8–72px ile sınırlı. CSS ≤100.000 karakter. Yalnızca değerlerdeki tırnaksız px belirteçleri çevrilir; yorumlar, dizeler, URL ve content korunur. Çıktıyı inceleyin: sınırlı sözcüksel dönüştürme, CSS doğrulayıcı değildir. Üslü CSS sayıları (örneğin 1e+3px veya 1e-3px) bütün belirteç olarak değiştirilmeden korunur.
Dönüştürme bu sayfada yapılır; girilen sayılar veya CSS bir dönüştürme hizmetine gönderilmez.
em alanı, öğenin yukarıdaki temel yazı tipi boyutunu miras aldığını varsayar. CSS'te em, öğenin kendi yazı tipi boyutuna göre hesaplanır; font-size özelliğinin kendisinde kullanıldığındaysa üst öğenin boyutuna göre.
Toplu dönüştürme: CSS ya da px değerlerinden bir liste yapıştırın
Her px değeri, yukarıdaki temel yazı tipi boyutuna göre rem olarak yeniden yazılır.
Kopyalandı
Kopyalanamadı. Sonucu seçip elle kopyalayın.
Px'i rem'e nasıl çeviririm?
Formül rem = px / kök yazı tipi boyutu, tersi ise px = rem x kök yazı tipi boyutudur. Öğe ne kadar derinde olursa olsun yalnızca kök html öğesinin yazı tipi boyutu sayılır; rem aritmetiğini öngörülebilir kılan da budur. Varsayılan 16px kökte: 10px = 0.625rem, 12px = 0.75rem, 14px = 0.875rem, 18px = 1.125rem, 20px = 1.25rem ve 40px = 2.5rem.
Sonucu yuvarlamayın. 16px kökte 15px tam olarak 0.9375rem'dir; 0.94rem'e yuvarlamak işlenen boyutu 15.04px'e taşır ve ızgara hizasını bozar. Tarayıcılar alt piksel uzunlukları hesaplar ve boyama sırasında bunları cihazın piksel ızgarasına oturtur; bu yüzden dönüştürücünün verdiği tam değeri kopyalayın. Dönüştürücü en fazla altı ondalık basamak yazar: 16px ve 10px gibi tam bölen köklerde bu değer kesindir, 14px gibi tam bölmeyen bir kökte ise rem'in milyonda biri kadar hassastır.
16px, 14px ve 10px kök boyutları için px-rem tablosu
Aynı piksel değeri, projenizin belirlediği köke göre üç farklı rem değerine dönüşür; bu tablo üçünü birden, ayrıca punto karşılığını da verir (CSS 1px'i 1/96 inç, 1pt'yi 1/72 inç olarak tanımlar, yani 1px = 0.75pt). 16px ve 10px sütunları tamdır. 14px kökte bölme çoğunlukla tam çıkmadığı için o değerler dört ondalık basamağa yuvarlanmış ve yaklaşıklık işaretiyle gösterilmiştir; yukarıdaki dönüştürücü daha fazla basamak verir.
| Piksel | rem (kök 16 px) | rem (kök 14 px) | rem (kök 10 px) | Punto |
|---|---|---|---|---|
| 1px | 0.0625rem | ≈0.0714rem | 0.1rem | 0.75pt |
| 2px | 0.125rem | ≈0.1429rem | 0.2rem | 1.5pt |
| 4px | 0.25rem | ≈0.2857rem | 0.4rem | 3pt |
| 8px | 0.5rem | ≈0.5714rem | 0.8rem | 6pt |
| 10px | 0.625rem | ≈0.7143rem | 1rem | 7.5pt |
| 12px | 0.75rem | ≈0.8571rem | 1.2rem | 9pt |
| 14px | 0.875rem | 1rem | 1.4rem | 10.5pt |
| 16px | 1rem | ≈1.1429rem | 1.6rem | 12pt |
| 18px | 1.125rem | ≈1.2857rem | 1.8rem | 13.5pt |
| 20px | 1.25rem | ≈1.4286rem | 2rem | 15pt |
| 24px | 1.5rem | ≈1.7143rem | 2.4rem | 18pt |
| 28px | 1.75rem | 2rem | 2.8rem | 21pt |
| 32px | 2rem | ≈2.2857rem | 3.2rem | 24pt |
| 36px | 2.25rem | ≈2.5714rem | 3.6rem | 27pt |
| 40px | 2.5rem | ≈2.8571rem | 4rem | 30pt |
| 48px | 3rem | ≈3.4286rem | 4.8rem | 36pt |
| 64px | 4rem | ≈4.5714rem | 6.4rem | 48pt |
| 80px | 5rem | ≈5.7143rem | 8rem | 60pt |
| 96px | 6rem | ≈6.8571rem | 9.6rem | 72pt |
px, rem, em: hangi birimi kullanmalıyım?
Pratik ayrım: okuyucunun metin boyutunu izlemesi gereken her şey için rem, öğenin kendi yazı tipi boyutunu izlemesi gereken değerler için em, yalnızca fiziksel olarak sabit kalması gereken uzunluklar için px. Örnek sütunu 16px kök ve 16px üst öğe varsayar.
| Birim | Neye göre | 20px şuna eşit | En uygun kullanım | Okuyucunun metin boyutunu izler |
|---|---|---|---|---|
| px | Hiçbir şeye – mutlak birim (1px = 1/96 inç) | 20px | Saç teli kalınlığındaki kenarlıklar, odak halkaları, tam simge boyutları | Hayır |
| rem | Kök html öğesinin yazı tipi boyutu | 1.25rem | Yazı boyutları, boşluklar, kırılma noktaları, bütün tipografi ölçekleri | Evet |
| em | Öğenin kendi yazı tipi boyutu (font-size verilirken üst öğenin boyutu) | 1.25em | Sardığı etiketle birlikte büyümesi gereken iç boşluk | Evet |
| % | Üst öğenin o özellik için aldığı değer | 125% | Akışkan genişlikler ve eski font-size zincirleri | Evet (font-size) |
İç boşluk, dış boşluk ve kenarlıklarda px mi rem mi?
Metin büyüdüğünde nefes alması gereken iç ve dış boşluklarda rem kullanın: düğme iç boşluğu, kart aralıkları, bölüm boşlukları, ızgara aralıkları. Saç teli inceliğindeki çizgilerde px kalsın. 1px'lik bir kenarlık, cihazdan bağımsız tek ve net bir pikseldir; aynı kenarlık 0.0625rem olarak yazıldığında bazı yakınlaştırma düzeylerinde sıfıra yuvarlanabilir ya da bulanıklaşabilir, aynısı 2px'lik odak halkaları ve ayırıcılar için de geçerlidir. Yukarıdaki toplu dönüştürme bu yüzden 1px ve 2px değerlerini varsayılan olarak olduğu gibi bırakıp geri kalan her şeyi yeniden yazar.
Medya sorguları, rem'in kendini ödettiği ikinci yerdir. Bir medya sorgusunun içinde rem, sizin html kuralınıza değil tarayıcının başlangıç yazı tipi boyutuna göre çözümlenir: 48rem'lik bir kırılma noktası varsayılan ayarlarda 768px'dir ve metin boyutunu büyüten okuyucuda büyür. Px ile yazılmış kırılma noktaları ise hiç kımıldamaz.
Figma, VS Code ve Tailwind'de px'i rem'e nasıl çeviririm?
Figma px ile ölçer ama Dev Mode rem üretebilir: Inspect ayarlarını açın, «Set unit scale» seçeneğini seçin ve kök yazı tipi boyutunuzu girin (varsayılan olarak 1rem = 16px). cssrem gibi VS Code eklentileri otomatik tamamlama üzerinden dönüştürür ve kökü bir ayar olarak sunar – cssrem.rootFontSize, varsayılanı 16 – bu yüzden 14px'lik bir projede çıktıya güvenmeden önce uyduğunu kontrol edin. Dosyanın tamamı için, önce temeli ayarlayıp yukarıdaki toplu dönüştürme kutusuna yapıştırın. Tailwind'in varsayılan ölçeği 16px kökle zaten rem tabanlıdır: bir boşluk birimi 0.25rem (4px) olduğundan 16px 4, 24px 6 ve 40px 10 eder.
Kaynaklar
PX-REM Dönüştürücü Hakkında
px, rem, em ve pt dönüştürün ve CSS değişikliklerini inceleyin.
16px: 24px → 1.5rem = 1.5em = 18pt.
font-size:24px → font-size:1.5rem; border:1px → border:1px (≤2px).
Pozitif kök; mutlak değer ≤1 milyar; altı ondalığa yuvarlanır. Önizleme 8–72px ile sınırlı. CSS ≤100.000 karakter. Yalnızca değerlerdeki tırnaksız px belirteçleri çevrilir; yorumlar, dizeler, URL ve content korunur. Çıktıyı inceleyin: sınırlı sözcüksel dönüştürme, CSS doğrulayıcı değildir. Üslü CSS sayıları (örneğin 1e+3px veya 1e-3px) bütün belirteç olarak değiştirilmeden korunur.
Kullanım alanları
Nasıl kullanılır
Kökü ayarlayın, bir birimi düzenleyin ve isteğe bağlı CSS yapıştırın. ≤2px küçük boyutları korur; CSV benzersiz dönüştürülmüş sayı çiftlerini listeler.
Pozitif kök; mutlak değer ≤1 milyar; altı ondalığa yuvarlanır. Önizleme 8–72px ile sınırlı. CSS ≤100.000 karakter. Yalnızca değerlerdeki tırnaksız px belirteçleri çevrilir; yorumlar, dizeler, URL ve content korunur. Çıktıyı inceleyin: sınırlı sözcüksel dönüştürme, CSS doğrulayıcı değildir. Üslü CSS sayıları (örneğin 1e+3px veya 1e-3px) bütün belirteç olarak değiştirilmeden korunur.
Profesyonel İpuçları
- Pozitif kök; mutlak değer ≤1 milyar; altı ondalığa yuvarlanır. Önizleme 8–72px ile sınırlı. CSS ≤100.000 karakter. Yalnızca değerlerdeki tırnaksız px belirteçleri çevrilir; yorumlar, dizeler, URL ve content korunur. Çıktıyı inceleyin: sınırlı sözcüksel dönüştürme, CSS doğrulayıcı değildir. Üslü CSS sayıları (örneğin 1e+3px veya 1e-3px) bütün belirteç olarak değiştirilmeden korunur.
- rem = px / kök boyutu; em aynı kök bağlamını varsayar; pt = px × 0,75 (inç başına 96 CSS pikseli).
Sık Sorulan Sorular
Burada em bağlamı köke eşittir. CSS içinde ilgili yazı boyutuna ve iç içe öğelere bağlıdır.
Dizeler, yorumlar, URL işlevleri ve content korunur. Stil dosyasını inceleyin; karmaşık veya hatalı CSS doğrulanmaz.