Langsung ke konten utama
LibraTool logoLibraTool

Konverter Pixel ke REM gratis

Konversi antara px, rem, em, pt, vw, vh, dan % dengan ukuran font dasar yang dapat dikonfigurasi. Termasuk tabel referensi untuk ukuran pixel umum.

Berfungsi offline setelah dimuat
1rem

Konteks (memengaruhi rem/em/vw/vh/%)

Semua konversi untuk 16 px

Token Tailwind terdekat (pada akar 16px)

Ukuran piksel umum β†’ rem (basis 16px)

Konversi CSS yang ditempel

Penggunaan umum

  • PX ke REM untuk Pengembangan WebUbah nilai piksel menjadi unit rem untuk CSS yang dapat diskalakan dan dapat diakses. Atur ukuran font dasar Anda dan lihat semua nilai setara secara instan.
  • Unit CSS untuk Desain ResponsifUbah antara px, vw, vh, dan % untuk membangun tata letak yang merespons dengan benar ke berbagai ukuran dan orientasi layar.
  • Konversi Spesifikasi Desain ke Unit CSSTerjemahkan nilai piksel Figma atau Sketch ke unit rem/em untuk implementasi CSS yang bersih dan dapat diskalakan.
  • Referensi Unit Tailwind CSSPahami bagaimana kelas pengukuran Tailwind CSS memetakan ke nilai piksel dan rem untuk implementasi yang tepat.
  • Konversi Unit CSS untuk Lembar Gaya CetakUbah antara px, pt, dan rem untuk kueri media cetak dan CSS keluaran PDF.

Cara kerja

Semua konversi berjalan sepenuhnya di browser Anda menggunakan mesin aritmetika tulisan tangan tanpa dependensi. Alat ini mengonversi antara tujuh satuan CSS (px, rem, em, pt, vw, vh, dan %) dengan merutekan setiap perhitungan melalui piksel sebagai basis umum, menerapkan pembagian atau perkalian sederhana terhadap ukuran font root, ukuran font induk, atau dimensi viewport yang Anda konfigurasi.

  1. 1
    Atur nilai konteks Anda
    Sebelum mengonversi, Anda mengonfigurasi empat angka yang membuat satuan CSS relatif bermakna: ukuran font root (default 16px, yang merupakan default browser), ukuran font elemen induk (untuk konversi em dan %), dan lebar serta tinggi viewport (untuk vw dan vh). Ini adalah nilai yang sama yang akan digunakan browser Anda saat menyelesaikan CSS saat runtime.
  2. 2
    Piksel sebagai perantara universal
    Konverter pertama-tama memanggil toPixels() untuk menormalkan masukan Anda menjadi jumlah piksel mentah β€” misalnya, 1,5rem menjadi 1,5 Γ— baseFontPx, dan 50vw menjadi 0,5 Γ— vpWidth. Kemudian fromPixels() membagi jumlah piksel itu dengan faktor yang sesuai untuk satuan target. Ketujuh satuan ditampilkan sekaligus dalam tabel konversi.
  3. 3
    Pencarian token Tailwind terdekat
    Setelah mengonversi, alat ini menghitung nilai rem dan memindai dua tabel pencarian tetap β€” tiga belas token ukuran-font Tailwind (text-xs hingga text-9xl) dan skala jaraknya β€” menemukan kecocokan terdekat berdasarkan jarak absolut. Tanda = berarti nilai adalah token eksak; β‰ˆ berarti itu perkiraan terdekat.
  4. 4
    Penulisan ulang CSS massal via regex
    Panel tempel-CSS menerima teks CSS mentah dan menerapkan substitusi regex: dalam mode px→rem ini mencocokkan setiap token px dan mengganti bagian numeriknya dengan nilai/baseFontPx + rem; dalam mode rem→px ini melakukan sebaliknya. Jumlah substitusi ditampilkan sehingga Anda bisa memverifikasi berapa banyak nilai yang ditulis ulang.

Alat terkait

πŸ“

Konverter Satuan

Konversi antara satuan panjang, berat, suhu, luas, volume, dan lainnya.

Coba
πŸ“

Generator CSS clamp()

Hasilkan nilai CSS clamp() yang fluid untuk tipografi dan spasi responsif. Atur ukuran min/maks dan rentang viewport, lihat pratinjau langsung, dan salin CSS satu baris.

Coba
🟦

Generator CSS Grid

Desain CSS grid secara visual β€” track, unit, dan gap β€” lalu salin CSS dan HTML yang dihasilkan.

Coba

Pertanyaan yang sering diajukan