Konversi px ke rem
Alat ini membantu konversi px ke rem (dan sebaliknya): masukkan nilai, atur ukuran dasar, lalu lihat rem, em, pt, persen, dan vw beserta tabel ukuran umum.
Contoh: Nilai 24 · Satuan nilai: px (piksel) · Ukuran font elemen akar (rem) 16 px · Ukuran font elemen induk (em, %) 16 px · Lebar viewport (vw) 1.440 px → Hasil: 24 px = 1,5 rem. Sumber: W3C – CSS Values and Units Module Level 4: absolute lengths (1in = 96px = 72pt) dan font-relative lengths (em, rem). Diperbarui: .
Cara menghitung
Dengan bawaan browser 16 px, 24 px tepat 1,5 rem. Rumusnya rem = px / ukuran dasar, dan sebaliknya px = rem · ukuran dasar.
Cara menghitung
rem relatif terhadap ukuran font elemen akar (html), em terhadap font elemen induk. 1 pt adalah 1/72 inci dan 1 px 1/96 inci, jadi 1 pt = 4/3 px; 12 pt sama dengan 16 px. Persen pada ukuran font merujuk ke font induk. 1 vw adalah 1 % lebar viewport. Alat ini mengubah nilai Anda lebih dulu ke px lalu ke semua satuan lain.
Perlu diketahui
- Jika pengunjung memperbesar font browser, nilai rem ikut membesar otomatis, sedangkan px tetap (aksesibilitas, WCAG 1.4.4).
- Jika CSS Anda menetapkan
html { font-size: 62.5% }, 1 rem = 10 px. Masukkan 10 sebagai ukuran dasar. - em bertumpuk: 1,5 em di dalam elemen 1,5 em menjadi 2,25 kali. rem tidak punya masalah ini.
- rem lazim untuk jarak dan ukuran font, sedangkan px masih cocok untuk garis tipis dan bingkai.
Pertanyaan umum
Bagaimana cara mengubah px ke rem?
Bagi nilai px dengan ukuran font dasar. Dengan 16 px: 24 px / 16 = 1,5 rem.
1 rem berapa px?
Secara bawaan 16 px, karena browser mengatur font akar demikian. Jika seseorang mengubah font browser atau menetapkan font-size pada html, nilainya berubah.
Apa beda em dan rem?
rem selalu merujuk ke font akar (html), em ke font elemen induk. Karena itu nilai em dapat berlipat pada elemen bersarang.
16 px berapa pt?
12 pt, karena 1 pt = 4/3 px. Sebaliknya 10 pt sekitar 13,33 px.
Sumber dan dasar hukum
- W3C – CSS Values and Units Module Level 4: absolute lengths (1in = 96px = 72pt) dan font-relative lengths (em, rem)
- MDN – CSS-Längeneinheiten (rem, em, vw)
- W3C WCAG 2.2 – Success Criterion 1.4.4 Resize Text (satuan relatif menghormati ukuran font pengguna)
Diperbarui: · Kebijakan editorial
Alat terkait
- Piksel ke cmUbah piksel ke cm dengan resolusi yang tepat: piksel ke cm, mm, dan inci, panjang ke piksel, serta ukuran cetak foto pada 300 dpi beserta rumusnya.
- CSS gradient generatorCSS gradient generator: buat gradasi warna linear, radial, atau conic dengan banyak color stop, sudut, dan warna cadangan – pratinjau langsung, CSS siap salin.
- CSS box shadow generatorBuat box shadow CSS dengan slider: beberapa lapisan, offset, blur, spread, warna dengan alfa, inset dan preset – pratinjau langsung dan salin CSS sekali klik.
- CSS border radius generatorBuat sudut membulat CSS dengan slider: semua sudut sekaligus atau satu per satu, px atau %, sintaks elips 8 nilai – kode terpendek, pratinjau langsung, salin.
- Kombinasi font – pasangan font untuk judul dan teksKombinasi font untuk judul dan teks: pratinjau langsung, CSS siap salin, dan ketersediaan di Windows, Mac, iPhone, dan Android – hanya memakai font sistem.
- Konversi warna: HEX, RGB, HSL, HSV, CMYKKonversi kode warna: HEX ke RGB, RGB ke HEX, HSL, HSV, HWB, dan CMYK. Masukkan warna dalam format apa pun atau pilih dari color picker, lalu salin hasilnya.
- Cek IP address sayaCek IP address Anda secara instan: menampilkan IP publik Anda, mendeteksi apakah IPv4 atau IPv6, dan menjelaskan bedanya. Gratis, IP Anda tidak disimpan.
- Kalkulator CSS clampKalkulator CSS clamp untuk ukuran font dan jarak fluid: masukkan nilai minimum, maksimum, dan rentang viewport, lalu salin nilai clamp() siap pakai.
- robots.txt validator dengan cek sitemaprobots.txt validator online: apakah URL diblokir untuk Googlebot, Bingbot, atau crawler AI? Menampilkan aturan penentu, kesalahan sintaks, dan mengecek sitemap.