Konverter PX ke REM

Alat ini mengonversi nilai piksel (px) menjadi satuan rem untuk CSS. Satuan rem selalu relatif terhadap font-size elemen akar (elemen html), sehingga menjadi pilihan utama untuk desain yang responsif dan mudah diakses. Tetapkan ukuran font akar Anda, ketik nilai piksel, dan padanan rem muncul seketika, siap ditempel ke stylesheet Anda.

Sebagian besar peramban menetapkan akar ke 16px, jadi 16px = 1rem. Jika proyek Anda mengubah font-size html, sesuaikan dasar di pengaturan.

Mengapa Pengembang Memilih REM

Penyesuaian Responsif

Ubah satu font-size akar di media query dan seluruh tata letak menyesuaikan secara proporsional — tanpa mengedit per elemen.

Aksesibilitas

rem menghormati preferensi ukuran font peramban pengguna, sehingga teks dan jarak membesar bagi pembaca yang butuh huruf lebih besar.

Ukuran yang Pasti

Karena rem tidak pernah bertumpuk saat disarangkan, satu nilai berarti hal yang sama di mana pun pada halaman.

Cara Mengonversi PX ke REM

1

Tetapkan Ukuran Font Akar

Masukkan font-size akar (html) proyek Anda pada kolom Ukuran Font Dasar. Bawaannya 16px, garis dasar peramban standar.

2

Masukkan Nilai Piksel

Pilih tab satuan px dan ketik nilai piksel yang ingin dikonversi. Padanan rem diperbarui secara langsung saat Anda mengetik.

3

Baca Hasilnya

Nilai rem muncul seketika di panel hasil, bersama padanan em dan px. Gunakan pengaturan desimal untuk mengontrol presisi pembulatan.

4

Salin ke CSS Anda

Klik tombol salin di samping hasil rem dan tempel langsung ke stylesheet Anda.

Rumusnya: rem = px ÷ font-size akar. Contohnya, 24px ÷ 16px = 1.5rem.

REM vs PX vs EM

Memilih satuan yang tepat bergantung pada apakah Anda ingin ukuran tetap atau yang merespons konteks. Berikut perbandingan ketiga satuan tersebut.

Satuan	Relatif Terhadap	Menyesuaikan Pengaturan Pengguna	Terbaik Untuk
px	Tidak ada (absolut)	Tidak	Garis tepi, bayangan, garis tipis
rem	Font-size akar	Ya	Tipografi, tata letak, jarak
em	Font-size induk	Ya	Ukuran lokal komponen

Praktik terbaik: gunakan rem untuk ukuran font, margin, dan padding agar antarmuka Anda sepenuhnya dapat menyesuaikan, dan sisakan px untuk hal-hal yang tidak boleh berubah ukuran, seperti garis tepi 1px.

Konversi Umum PX ke REM

Nilai referensi dengan asumsi ukuran font akar 16px. Sesuaikan dasar pada alat untuk menghitung ulang bagi pengaturan akar lain.

Piksel	REM (akar 16px)	Penggunaan Umum
12px	`0.75rem`	Keterangan, cetakan kecil
14px	`0.875rem`	Teks sekunder, label
16px	`1rem`	Dasar teks isi
18px	`1.125rem`	Ukuran baca yang nyaman
24px	`1.5rem`	Judul bagian
32px	`2rem`	Judul halaman

Pertanyaan yang Sering Diajukan

Apa itu ukuran font dasar dan mengapa penting?

Itu adalah font-size akar (html) yang menjadi dasar perhitungan rem. Peramban menetapkannya 16px secara bawaan, jadi 1rem biasanya setara 16px. Jika CSS Anda menetapkan ukuran akar berbeda, ubah kolom ini ke nilai tersebut agar konversinya akurat.

Bagaimana px dikonversi ke rem?

Bagi nilai piksel dengan ukuran font akar: rem = px ÷ akar. Dengan akar 16px, 24px menjadi 1.5rem. Alat ini menghitungnya seketika dan membulatkan sesuai jumlah desimal pilihan Anda.

Apakah rem lebih baik daripada px untuk aksesibilitas?

Umumnya ya. Karena rem menyesuaikan dengan preferensi ukuran font peramban pengguna, orang yang memperbesar teks bawaan akan mendapat antarmuka yang proporsional lebih besar. Nilai px tetap mengabaikan preferensi itu, yang dapat mengganggu keterbacaan.

Apakah rem bertumpuk saat elemen disarangkan?

Tidak. Berbeda dengan em, rem selalu mengacu pada font-size akar, jadi nilai rem yang sama dirender identik seberapa pun dalamnya elemen disarangkan. Kepastian ini adalah salah satu keunggulan terbesar rem.

Apakah konversi dilakukan di peramban saya?

Ya. Perhitungan berjalan sepenuhnya di sisi klien saat Anda mengetik. Tidak ada yang diunggah ke server, jadi hasilnya instan dan alat tetap berfungsi luring setelah dimuat.