Ana içeriğe geç
LibraTool logoLibraTool

Ücretsiz Piksel'den REM'e Dönüştürücü

Yapılandırılabilir temel yazı tipi boyutuyla px, rem, em, pt, vw, vh ve % arasında dönüştürün. Yaygın piksel boyutları için referans tablosu içerir.

Yüklendikten sonra çevrimdışı çalışır
1rem

Bağlam (rem/em/vw/vh/% değerlerini etkiler)

16 px için tüm dönüşümler

En yakın Tailwind belirteçleri (16px kökünde)

Yaygın piksel boyutları → rem (16px temel)

Yapıştırılan CSS'i Dönüştür

Yaygın kullanımlar

  • Web Geliştirme için PX ile REMÖlçeklenebilir, erişilebilir CSS için piksel değerlerini rem birimlerine dönüştürün. Temel yazı tipi boyutunuzu ayarlayın ve tüm eşdeğer değerleri anında görün.
  • Duyarlı Tasarım için CSS BirimleriFarklı ekran boyutlarına ve yönelimlerine doğru şekilde yanıt veren düzenler oluşturmak için px, vw, vh ve % arasında dönüştürün.
  • Tasarım Speclerini CSS Birimlerine DönüştürünFigma veya Sketch piksel değerlerini temiz, ölçeklenebilir CSS uygulaması için rem/em birimlerine çevirin.
  • Tailwind CSS Birimi ReferansıTailwind CSS boyutlandırma sınıflarının piksel ve rem değerlerine nasıl eşlendiğini anlayın.
  • Yazdırma Stil Sayfaları için CSS Birimlerini DönüştürünYazdırma ortam sorguları ve PDF çıkış CSS'si için px, pt ve rem arasında dönüştürün.

Nasıl çalışır

Tüm dönüştürmeler hiçbir bağımlılığı olmayan elle yazılmış bir aritmetik motoruyla tamamen tarayıcınızda çalışır. Araç yedi CSS birimi (px, rem, em, pt, vw, vh ve %) arasında, her hesaplamayı ortak taban olarak piksel üzerinden geçirerek ve yapılandırdığınız kök yazı tipi boyutuna, üst öğe yazı tipi boyutuna veya görünüm alanı boyutlarına karşı basit bölme ya da çarpma uygulayarak dönüştürür.

  1. 1
    Bağlam değerlerinizi ayarlayın
    Dönüştürmeden önce göreli CSS birimlerini anlamlı kılan dört sayıyı yapılandırırsınız: kök yazı tipi boyutu (varsayılan 16px, tarayıcı varsayılanı), üst öğe yazı tipi boyutu (em ve % dönüştürmeleri için) ve görünüm alanı genişliği ile yüksekliği (vw ve vh için). Bunlar, tarayıcınızın çalışma zamanında CSS'i çözerken kullanacağı değerlerin aynısıdır.
  2. 2
    Evrensel ara birim olarak piksel
    Dönüştürücü önce girdinizi ham piksel sayısına normalleştirmek için toPixels()'i çağırır — örneğin 1.5rem, 1.5 × baseFontPx; 50vw ise 0.5 × vpWidth olur. Ardından fromPixels() bu piksel sayısını hedef birim için uygun çarpana böler. Yedi birimin tamamı dönüştürme tablosunda aynı anda gösterilir.
  3. 3
    En yakın Tailwind belirteci araması
    Dönüştürdükten sonra araç rem değerini hesaplar ve sabit kodlu iki başvuru tablosunu — Tailwind'in on üç yazı tipi boyutu belirteci (text-xs'ten text-9xl'e) ve boşluk ölçeği — tarayarak mutlak uzaklığa göre en yakın eşleşmeyi bulur. = işareti değerin tam bir belirteç olduğunu; ≈ ise en yakın yaklaşım olduğunu gösterir.
  4. 4
    Düzenli ifadeyle toplu CSS yeniden yazma
    CSS yapıştırma paneli ham CSS metnini kabul eder ve bir düzenli ifade değiştirmesi uygular: px→rem modunda her px öğesini eşleştirip sayısal kısmı value/baseFontPx + rem ile değiştirir; rem→px modunda tersini yapar. Kaç değerin yeniden yazıldığını doğrulayabilmeniz için değiştirme sayısı gösterilir.

İlgili araçlar

📏

Birim Dönüştürücü

Uzunluk, ağırlık, sıcaklık, alan, hacim ve daha fazlası arasında dönüştürün.

Deneyin
📐

CSS clamp() Oluşturucu

Duyarlı tipografi ve aralık için akışkan bir CSS clamp() değeri oluşturun. Min/maks boyutu ve görünüm alanı aralığını ayarlayın, canlı önizleme görün ve tek satır CSS'i kopyalayın.

Deneyin
🟦

CSS Grid Oluşturucu

Görsel olarak bir CSS grid tasarlayın — izler, birimler ve boşluklar — ve oluşturulan CSS ve HTML'yi kopyalayın.

Deneyin

Sık sorulan sorular