DevToolPal
ID

Konverter PX ke REM

Ubah px ke rem atau em (dan sebaliknya) dengan ukuran font dasar apa pun, lihat tabel konversi, dan ubah semua nilai px dalam CSS yang ditempel sekaligus.

Berjalan lokal, tidak pernah diunggah

Opsi

Arah
Satuan

CSS atau nilai

0 karakter · 0 B

Hasil

Hasil akan muncul di sini

Fungsinya

Alat ini mengonversi panjang CSS antara piksel dan satuan relatif rem serta em. Ketik satu nilai seperti 24px untuk mendapatkan 1.5rem, tulis beberapa nilai satu per baris untuk mengubah semuanya sekaligus, atau tempel seluruh stylesheet dan setiap nilai px di dalamnya akan ditulis ulang di tempat. Tabel referensi menampilkan ukuran umum dari 1px hingga 128px pada ukuran dasar Anda. Tidak ada yang keluar dari browser Anda.

Cara memakai

  1. Tempel CSS atau ketik satu nilai per baris. Angka tanpa satuan dibaca sebagai px (atau rem/em saat arah dibalik), dan nilai yang ditulis dengan satuan lain diubah ke arah sebaliknya.
  2. Atur Ukuran font dasar. Semua browser memakai 16px secara bawaan; sebagian proyek menulis html { font-size: 62.5% } agar 1rem = 10px.
  3. Pilih Arah (px → rem atau rem → px), Satuan (rem atau em), dan jumlah Desimal yang dipertahankan.
  4. Bila perlu, atur Biarkan px untuk nilai di bawah agar border 1px dan garis tipis lainnya tetap px.
  5. Salin hasilnya dengan tombol di atasnya.

Contoh

/* before */
.title { font-size: 24px; margin-bottom: 12px; }

/* after (base 16px) */
.title { font-size: 1.5rem; margin-bottom: 0.75rem; }

Nilai yang bukan px, seperti persentase, warna, nama file di url(), dan nama kelas seperti .mt-16px, tidak diubah. 0px menjadi 0.

px, rem, dan em

  • px adalah satuan absolut yang mengabaikan ukuran font pilihan pembaca.
  • rem (“root em”) adalah kelipatan ukuran font elemen html. Jika pembaca mengatur browsernya ke 20px, 1rem menjadi 20px dan seluruh tata letak ikut menyesuaikan.
  • em adalah kelipatan ukuran font elemen saat ini. Berguna untuk jarak yang harus mengikuti teksnya, tetapi em yang bersarang akan berlipat, sehingga rem adalah pilihan bawaan yang lebih aman.

Media query juga dikonversi: @media (min-width: 768px) menjadi 48rem (atau 48em), sehingga breakpoint tetap konsisten saat pembaca memperbesar teks. Di dalam media query, rem dan em sama-sama mengacu pada ukuran font bawaan browser, bukan aturan html Anda.

FAQ

› Bagaimana mengubah px ke rem?

Bagi nilai piksel dengan ukuran font root. Dengan bawaan browser 16px, 24px ÷ 16 = 1.5rem dan 12px ÷ 16 = 0.75rem. Untuk kebalikannya, kalikan: 2rem × 16 = 32px.

› Apa beda rem dan em?

rem relatif terhadap ukuran font elemen root html, jadi 1rem sama besar di seluruh halaman. em relatif terhadap ukuran font elemen saat ini (atau induknya untuk font-size itu sendiri), sehingga berlipat ketika elemen bersarang. Gunakan rem untuk sebagian besar ukuran dan em ketika sesuatu harus ikut skala teksnya sendiri, seperti padding tombol.

› Mengapa memakai rem, bukan px?

Saat pembaca memperbesar ukuran font bawaan di pengaturan browser, ukuran dalam rem ikut membesar, sedangkan px tetap. rem menjaga tata letak tetap aksesibel dan memudahkan penskalaan seluruh desain cukup dengan mengubah satu nilai root.

› Apakah border 1px perlu dikonversi?

Biasanya tidak. Garis 0.0625rem bisa tampak buram atau hilang pada tingkat zoom tertentu. Atur “Biarkan px untuk nilai di bawah” ke 2px dan konverter akan membiarkan border serta nilai mungil lainnya tetap dalam px.