Cara menggunakan
- Atur ukuran font root jika situs Anda mengubahnya (misalnya, html { font-size: 62.5% } menjadikannya 10px).
- Masukkan nilai di salah satu kolom untuk mengonversi px ke rem atau rem ke px. Beralih ke em jika ukuran perlu mengikuti elemen induk.
- Gunakan tabel untuk melihat nilai dengan cepat, atau tempel cuplikan CSS untuk mengonversi semua panjang px sekaligus, lalu salin hasilnya.
Cara kerja
rem = px ÷ ukuran font root. Dengan ukuran font root default 16px, 24px = 1.5rem dan 14px = 0.875rem. em menggunakan rumus yang sama, tetapi berdasarkan ukuran font elemen induk. Karena itu, nilai em yang bersarang akan dikalikan; rem menghindari hal ini karena selalu mengacu ke root.
Menggunakan rem untuk ukuran font dan spasi memungkinkan teks membesar ketika seseorang meningkatkan ukuran font default di setelan browser. Hal ini membantu orang dengan gangguan penglihatan. Nilai dibulatkan hingga empat angka desimal.
Konverter cuplikan mengubah angka yang diikuti px. Komentar, url(…) dan string dalam tanda kutip tidak diubah. Nilai 1px tetap dipertahankan jika Anda memilihnya (garis batas tipis biasanya sebaiknya tetap 1px), 0px ditulis sebagai 0, dan secara default kondisi @media dan @container tidak diubah. Ini karena dalam media query, rem dan em selalu mengacu ke ukuran font awal browser, terlepas dari ukuran font root yang Anda tetapkan. Konverter tidak memahami semantik calc() selain mengganti angka px di dalamnya, tetapi hasilnya tetap benar karena setiap panjang dikonversi secara terpisah.
Contoh
Ukuran root default
Dengan ukuran root 16px: 12px = 0.75rem, 20px = 1.25rem, 32px = 2rem, 0.5rem = 8px.
Trik 62.5%
Jika CSS Anda menetapkan html { font-size: 62.5% }, ukuran root menjadi 10px, sehingga 14px = 1.4rem dan 24px = 2.4rem. Atur kolom ukuran font root ke 10 agar sesuai.
Mengonversi komponen
padding: 24px 16px; border: 1px solid #ddd; menjadi padding: 1.5rem 1rem; border: 1px solid #ddd; jika “Pertahankan nilai 1px” diaktifkan.
Pertanyaan yang sering diajukan
Sebaiknya gunakan rem atau em?
Gunakan rem untuk sebagian besar ukuran font, spasi, dan tata letak karena hasilnya konsisten di mana saja. Gunakan em jika ukurannya perlu mengikuti ukuran teks komponennya sendiri, seperti padding di dalam tombol.
Mengapa media query tidak dikonversi ke rem?
Bisa, tetapi dalam media query, 1rem selalu sama dengan ukuran font default browser (biasanya 16px), bukan ukuran font html Anda. Karena itu, konverter melewatinya secara default. Nonaktifkan opsi tersebut jika Anda tetap membaginya dengan 16.
Apakah rem lebih baik daripada px untuk aksesibilitas?
Untuk ukuran font, ya: rem mengikuti setelan ukuran font default pengguna, sedangkan ukuran font px mengabaikannya. Zoom browser berfungsi dengan kedua satuan.
Privasi
Konversi dan cuplikan CSS diproses di browser Anda dan tidak pernah dikirim ke mana pun.