PX - REM Dönüştürücü | CSS Hesaplayıcı ve Bilgi Kartı

CSS ve UI tasarımı için PX'i REM'e veya REM'i PX'e dönüştürün. Temel yazı tipi boyutunu değiştirin, canlı bilgi kartını kullanın ve eşleşen Tailwind boşluk belirteçlerini kontrol edin.

PX / REM Dönüştürücü

rem = px / kök yazı tipi boyutu

px
Yaygın temel boyutlar
px
rem

Bilgi Kartı

PXREMEn Yakın Tailwind
4px0.25remp-1
8px0.5remp-2
10px0.625rem-
12px0.75remp-3
14px0.875rem-
16px1remp-4
18px1.125rem-
20px1.25remp-5
24px1.5remp-6
32px2remp-8
40px2.5remp-10
48px3remp-12
64px4remp-16
80px5remp-20
96px6remp-24

Nasıl Kullanılır

  1. Temel Boyut alanında projenizin html font-size değerini doğrulayın. Yaygın varsayılan değer 16px'tir.
  2. PX girişine 24 gibi bir tasarım değeri yazın.
  3. REM girişi anında 1.5rem olarak güncellenir; ayrıca 32px elde etmek için 2rem de yazabilirsiniz.
  4. Yaygın yazı tipi boyutları, boşluk değerleri ve Tailwind referansları için aşağıdaki bilgi kartını kullanın.

Temel Özellikler

  • Anında Çift Yönlü Dönüştürme: Hesapla butonuna basmaya gerek kalmadan PX veya REM yazın ve anında tersi değeri elde edin.
  • Özel Temel Yazı Tipi Boyutu: 16px ile başlayın veya 10px, 14px ya da projeye özel herhangi bir kök boyuta kolayca geçiş yapın.
  • Yerleşik Bilgi Kartı: Yaygın boyutlar (12px, 16px, 24px ve 32px eşdeğerleri dahil) temel boyutunuza göre anında güncellenir.
  • Tailwind Boşluk Referansı: Eşleşen piksel değerleri için yaygın Tailwind CSS boşluk belirteçlerini (spacing tokens) görüntüleyin.
  • Yerel ve Işık Hızında: Tüm hesaplamalar ağ isteği olmadan doğrudan tarayıcı belleğinde çalışır.

İlgili Araçlar

CSS Küçültücü ve Güzelleştirici - Boyut İstatistikleri, Güvenli Sıkıştırma, Yerel

CSS kodlarınızı yerel olarak küçültün veya güzelleştirin—yükleme yok. Yorumları/boşlukları kaldırın, boyut tasarruf istatistiklerini görün veya kodu okunabilir yapın.
Güvenli JSON Biçimlendirici ve Tür Oluşturucu - Yerel Tür Üretimi

Güvenli JSON biçimlendirici: JSON'u yerel olarak biçimlendirin, doğrulayın ve onarın. Güzelleştirin/küçültün, hataları vurgulayın, TypeScript veya Zod oluşturun, XML'e dönüştürün—tamamen gizli.
Ücretsiz JSONPath Test Edici ve Değerlendirici | Yerel Gerçek Zamanlı Sorgular

API JSON için ücretsiz JSONPath test edici ve değerlendirici. Eşleşen düğümleri gerçek zamanlı olarak ayıklayın, yolları inceleyin ve ayrıştırma tarayıcınızda yerel olarak kalırken JSON sonuçlarını kopyalayın.
JSON - CSV Dönüştürücü - Yerel Tablo Dışa Aktarma

JSON nesnelerini veya dizilerini tarayıcınızda yerel olarak CSV'ye dönüştürün. Alanları düzleştirin, sonucu önizleyin, ardından verileri sunucuya yüklemeden CSV'yi kopyalayın veya indirin.
CSV - JSON Dönüştürücü - Yerel Gerçek Zamanlı Ayrıştırıcı

CSV metinlerini veya dosyalarını tarayıcınızda yerel olarak JSON dizilerine dönüştürün. Başlıkları, virgül/noktalı virgül/sekme ayırıcılarını ve dosya yüklemeyi destekler.
JSON Fark Karşılaştırıcı - Anlamsal JSON Karşılaştırma

JSON belgelerini yerel ve anlamsal olarak karşılaştırın. Anahtar sırasını yok sayın, eklenen/silinen/değiştirilen yolları vurgulayın ve yükleme yapmadan raporu dışa aktarın.
JSON Küçültücü ve Sıkıştırıcı - Verileri Çevrimiçi Optimize Edin

Ücretsiz çevrimiçi JSON küçültücü. Boşlukları ve satır sonlarını kaldırarak JSON yüklerini tek satırda sıkıştırın. %100 gizli, istemci taraflı işleme.
JSON - TypeScript Dönüştürücü - Yerel Arayüzler Oluşturun

Ücretsiz çevrimiçi JSON - TypeScript dönüştürücü. JSON verilerinizden TypeScript arayüzlerini ve türlerini anında oluşturun. %100 gizli, istemci taraflı kod üretimi.

Hesaplama Mantığı

  • PX'ten REM'e formülü: REM = PX / Temel Boyut.
  • REM'den PX'e formülü: PX = REM × Temel Boyut.
  • Tarayıcı varsayılan kök boyutuyla, 16px = 1rem ve 24px = 1.5rem olur.

Sıkça Sorulan Sorular

1rem kaç pikseldir?

Çoğu tarayıcıda 1rem varsayılan olarak 16px'e eşittir. Projeniz html { font-size } tanımını değiştiriyorsa, o kök boyutu kullanın.

PX ile REM arasındaki fark nedir?

PX mutlak bir piksel birimidir. REM kök yazı tipi boyutuna görecelidir; bu da düzenlerin kullanıcının tarayıcı yazı tipi boyutu tercihlerine saygı duymasını sağlar.

Bazı projeler neden 10px temel boyut kullanır?

Bazı ekipler, zihinsel matematiği kolaylaştırmak için html { font-size: 62.5%; } ayarlar, böylece 1rem yaklaşık 10px olur. Kullanmadan önce erişilebilirlik etkilerini göz önünde bulundurun.

Bu araç EM birimini de dönüştürür mü?

Hayır. Bu araç PX ve REM'e odaklanmıştır. EM mevcut öğenin yazı tipi boyutuna bağlı olduğundan aynı dönüştürme olarak ele alınmamalıdır.

Herhangi bir CSS veya tasarım verisi sunucuya yükleniyor mu?

Hayır. Dönüştürme işlemi sunucu hesaplaması veya dosya yüklemesi olmaksızın tarayıcınızda yerel olarak gerçekleşir.