Cara memakai
- Ketik ukuran di Nilai dan pilih arah di Konversi, misalnya px ke rem.
- Periksa Ukuran font dasar (px). Pakai ukuran yang diatur situs Anda pada elemen akar; 16 px adalah bawaan peramban.
- Tempel CSS ke CSS yang akan diubah dan pilih Ubah px CSS menjadi rem atau em.
- Salin CSS dengan panjang yang sudah diubah, atau periksa satu ukuran di Tabel konversi.
Hubungan px, rem, dan em
Px adalah panjang absolut di layar. Rem adalah kelipatan ukuran font elemen akar (elemen html), dan em adalah kelipatan ukuran font elemen tempat ia dipakai. Kedua satuan mengikuti ukuran font dasar, sehingga jika dasarnya 16 px, 1 rem adalah 16 px.
Untuk mengubah px menjadi rem, bagi dengan dasarnya. Untuk mengubah rem atau em kembali menjadi px, kalikan dengan dasarnya. Dengan ukuran dasar yang sama, rem dan em memberi angka yang sama; keduanya berbeda hanya bila ukuran font elemen induk bukan dasarnya.
rem = px / ukuran font dasar; px = rem x ukuran font dasarYang diubah pengubah CSS dan yang tidak
Setiap angka yang diikuti px diubah, termasuk nilai negatif dan desimal seperti .5px. Angka ditulis dengan titik, sebagaimana CSS memerlukannya, paling banyak empat desimal dan tanpa nol di belakang. Panjang nol menjadi 0 tanpa satuan, yang diterima CSS.
Pengubah tidak memperhatikan arti CSS-nya. Nilai px di dalam komentar atau string, seperti content dengan teks 10px, tetap ikut diubah. Isi url() dibiarkan, sehingga nama berkas yang berakhiran px tidak diubah. Periksa hasilnya sebelum Anda memakainya.
- Pakai rem untuk ukuran font, jarak, dan lebar yang harus ikut membesar ketika pengunjung mengubah ukuran teks.
- Pertahankan 1 px untuk garis batas yang tipis, karena nilai rem bisa dibulatkan menjadi garis kabur di sebagian layar.
Contoh: teks isi 18 px dengan dasar 16 px
18 dibagi 16 adalah 1,125, sehingga font-size: 18px menjadi font-size: 1.125rem. Margin 40 px menjadi 2.5rem, karena 40 dibagi 16 adalah 2,5.
24 px yang sama pada dasar 10 px adalah 2,4 rem, dan tabel menampilkan 24 px sebagai 1,5 rem bila dasarnya 16 px. Potongan CSS contoh bawaan punya enam panjang px; keenamnya diubah dan jumlahnya tertulis 6.
Pertanyaan yang sering diajukan
Mengapa 16 px menjadi ukuran font dasar?
Sebagian besar peramban memakai 16 px sebagai ukuran font bawaan elemen akar, sehingga 1 rem adalah 16 px kecuali situs Anda mengatur ukuran lain. Masukkan nilai yang diatur situs Anda pada elemen html.
Apa perbedaan rem dan em?
rem berdasar pada ukuran font elemen akar, sehingga sama di seluruh halaman. em berdasar pada ukuran font elemen tempat ia dipakai, sehingga ukurannya berubah ketika elemen bersarang. Dengan dasar yang sama, angkanya sama.
Haruskah saya mengubah setiap nilai px menjadi rem?
Tidak selalu. Garis batas 1 px lebih tajam dalam px di banyak layar, dan beberapa detail kecil lebih baik dibiarkan tetap. Pakai rem untuk ukuran teks, jarak, dan lebar tata letak yang harus mengikuti pengaturan pengunjung.
Mengapa beberapa nilai px di CSS saya tidak diubah?
Nilai px hanya diubah bila berdiri sendiri sebagai panjang. Nilai di dalam url(), dan teks seperti 10pxx atau 10px-2 yang bukan panjang biasa, dibiarkan apa adanya. Periksa nilai yang tidak biasa secara manual.
Mengapa tabelnya berhenti di 64 px?
Tabel memuat ukuran yang paling sering dipakai desainer. Untuk ukuran lain, ketik ke kotak Nilai dan pilih arahnya.
Sumber
Angka dan teks terakhir diperiksa pada Selasa, 10 November 2026.