Konverter PX ke REM

Cara menggunakan konverter PX ke REM

1. Atur Ukuran font root (px). Nilainya 16 di semua browser utama, kecuali stylesheet Anda mengubahnya. Tombol di bawah kolom ini beralih ke 16 px, 10 px (trik html { font-size: 62.5%; }), atau 18 px.
2. Jika Anda bekerja dengan em, atur Ukuran font induk untuk em (px): ukuran font terhitung dari elemen yang membungkus elemen yang sedang Anda beri gaya.
3. Di bagian Konversi satu nilai, ketik di Piksel (px), REM, atau EM. Dua kolom lainnya diperbarui saat Anda mengetik, dan baris di bawahnya menampilkan pembagian yang dipakai.
4. Tabel konversi massal menampilkan ukuran-ukuran umum. Ganti Nilai piksel dengan design token Anda sendiri (skala spasi, skala tipografi…) dan gunakan Salin tabel untuk menempelkan hasilnya ke spreadsheet atau dokumen desain.
5. Untuk memigrasikan kode yang sudah ada, tempel kode tersebut ke CSS yang akan dikonversi, pilih opsinya, lalu klik Konversi px ke rem. Muat contoh menampilkan stylesheet kecil. Salin CSS hasil konversi dengan tombol Salin.

Rumusnya

• rem = px ÷ ukuran font root. Dengan nilai bawaan 16 px, 24px = 24 ÷ 16 = 1,5rem.
• em = px ÷ ukuran font induk. Di dalam judul berukuran 20 px, 10px = 0,5em.
• px = rem × ukuran font root, dan px = em × ukuran font induk.

rem atau em: mana yang dipakai?

rem (“root em”) selalu mengacu pada ukuran font elemen html, sehingga 1.5rem berarti hal yang sama di seluruh halaman. Ini pilihan paling aman untuk ukuran font, spasi, lebar maksimum, dan jarak antarelemen tata letak.

em mengacu pada ukuran font elemen itu sendiri (untuk font-size, ukuran font induknya). Nilainya berlipat: daftar berukuran 0,9em yang bersarang tiga kali akhirnya menjadi 0,9 × 0,9 × 0,9 = 73% dari ukuran dasar. Karena itu em praktis untuk hal-hal yang harus menyesuaikan dengan teksnya sendiri (padding tombol, ukuran ikon di samping label), tetapi berisiko untuk tipografi global.

Mengapa rem penting untuk aksesibilitas

Banyak orang memperbesar ukuran font bawaan di pengaturan browser mereka (misalnya dari 16 menjadi 20 atau 24 px) alih-alih memperbesar tampilan setiap halaman. Ukuran yang ditulis dalam px mengabaikan preferensi itu; ukuran dalam rem atau em mengikutinya. Memakai rem untuk teks dan spasi membuat seluruh tata letak ikut membesar sesuai pilihan pembaca, sehingga membantu memenuhi kriteria keberhasilan WCAG 2.2 1.4.4 (ubah ukuran teks hingga 200%).

Dengan alasan yang sama, hindari menulis html { font-size: 16px; } dalam px: gunakan persen (100%, atau 62.5% jika Anda ingin 1rem = 10px) agar pengaturan pengguna tetap berlaku.

Apa yang diubah oleh konverter CSS

Konverter ini mengganti angka yang diikuti px di dalam deklarasi dengan nilai yang dibagi ukuran font root. Komentar, string, dan nilai url() tidak pernah disentuh.

• Pertahankan lebar border dan outline dalam px: border, border-*-width, outline, outline-offset, dan column-rule tetap dalam px, sehingga garis tipis tetap tajam. border-radius tetap dikonversi.
• Pertahankan nilai 1px: nilai apa pun antara −1px dan 1px dibiarkan apa adanya.
• Konversi media query ke em (basis 16px): dalam kondisi @media, rem dan em selalu mengacu pada ukuran font awal browser, tidak pernah pada aturan html Anda, jadi alat ini membagi dengan 16 dan menulis em di sana, berapa pun ukuran root Anda. Jika tidak dicentang, media query tetap memakai px.