Konversi Ukuran Pixel ke Ukuran REM dalam CSS: Panduan Lengkap
Belajar cara mengonversi ukuran pixel ke ukuran REM dalam CSS dengan contoh penggunaan yang jelas.
- Fauzan My
- 2 min read
Bingung mengonversi ukuran pixel menjadi ukuran REM dalam CSS? Jangan khawatir, disini saya akan memberikan panduan lengkap beserta contoh penggunaannya. Ukuran REM sangat berguna dalam pengembangan web responsif.
Apa Itu Ukuran REM?
Pertama-tama, mari pahami dulu apa itu REM. REM adalah singkatan dari “root em” atau “font size dari elemen root”. Sebagian kasus, elemen root ini adalah elemen <html>. REM digunakan dalam CSS untuk menentukan ukuran font dan dimensi elemen lainnya secara relatif terhadap ukuran font elemen root.
1 REM sama dengan 16 pixel secara default. Artinya, jika ukuran font elemen root Anda adalah 16 pixel, 1 REM akan sama dengan 16 pixel.
Cara Menulis Ukuran REM
Ada dua cara umum untuk menulis ukuran REM dalam CSS:
- Dengan notasi biasa, misalnya:
font-size: 1rem;
padding: 0.5rem;
- Menghilangkan angka nol:
padding: .75rem; /* Ini sama dengan 0.75rem */
Kebanyakan frontend programmer suka menulis .5rem biar lebih rapi dan ringkas.
Berikut tabel ukuran konversi pixel ke ukuran rem.
| Pixel | REM | |
|---|---|---|
| 1px | = | 0.0625rem |
| 2px | = | 0.125rem |
| 3px | = | 0.1875rem |
| 4px | = | 0.25rem |
| 5px | = | 0.3125rem |
| 6px | = | 0.375rem |
| 7px | = | 0.4375rem |
| 8px | = | 0.5rem |
| 9px | = | 0.5625rem |
| 10px | = | 0.625rem |
| 11px | = | 0.6875rem |
| 12px | = | 0.75rem |
| 13px | = | 0.8125rem |
| 14px | = | 0.875rem |
| 15px | = | 0.9375rem |
| 16px | = | 1rem |
| 18px | = | 1.125rem |
| 20px | = | 1.25rem |
| 22px | = | 1.375rem |
| 24px | = | 1.5rem |
| 26px | = | 1.625rem |
| 28px | = | 1.75rem |
| 30px | = | 1.875rem |
| 32px | = | 2rem |
| 34px | = | 2.125rem |
| 36px | = | 2.25rem |
| 38px | = | 2.375rem |
| 40px | = | 2.5rem |
| 50px | = | 3.125rem |
| 60px | = | 3.75rem |
| 70px | = | 4.375rem |
| 80px | = | 5rem |
| 90px | = | 5.625rem |
| 100px | = | 6.25rem |
Kesimpulan
Semoga beberapa list konversi diatas dapat membantu, kalau butuh angka yang lebih besar lagi, bisa gunakan tool konverter pixel to rem secara online lainnya.
