Konversi px, em, rem, pt, dan % dengan ukuran font dasar yang bisa diatur — tabel kesetaraan lengkap di browser Anda.
CSS mengukur panjang dalam beberapa satuan yang semuanya berakhir sebagai piksel di layar, dan mengonversinya secara manual adalah gangguan harian dalam kerja front-end. Konverter ini mengambil satu nilai — dalam px, em, rem, pt, atau persen — dan menampilkan panjang yang sama dalam kelima satuan sekaligus, memakai ukuran font dasar yang Anda kendalikan. Dasar default-nya 16 px, ukuran font awal di semua browser besar, tetapi jika design system Anda mengatur html { font-size: 62.5% } atau ukuran root lain, ubah dasarnya dan seluruh tabel menyesuaikan.
Hubungannya linier dan tool menampilkan rumus yang diterapkannya: nilai em dan rem dikalikan ukuran font dasar untuk mendapat piksel, point dikonversi pada rasio yang ditetapkan CSS 96 px per 72 pt (jadi 1 pt = 1,333 px), dan persentase dibaca relatif terhadap dasar, persis seperti em. Satu catatan jujur yang dinyatakan tool di layar: em dan rem memberi hasil identik di sini karena satu dasar dipakai untuk keduanya. Di halaman nyata keduanya berbeda — rem selalu merujuk elemen root, sementara em merujuk ukuran font elemen saat ini, yang bisa saja diskalakan oleh induk-induknya.
Kegunaan umum: menerjemahkan handoff desainer dalam piksel menjadi nilai rem yang distandarkan codebase Anda, memeriksa berapa hasil 0.875 rem sebelum menulis media query, mengonversi ukuran pt berorientasi cetak dari panduan gaya menjadi satuan layar, atau menyusun skala tipografi aksesibel yang menghormati pengaturan browser pengguna. Konversinya berjalan 100% di browser Anda saat Anda mengetik — tidak ada yang diunggah, dan tidak ada yang perlu diinstal.
px = em × dasar; px = rem × dasar; px = pt × 96 ÷ 72; px = % ÷ 100 × dasar. Kebalikannya: em = rem = px ÷ dasar; pt = px × 72 ÷ 96; % = px ÷ dasar × 100. Dengan dasar default 16 px: 1.5 em = 24 px = 18 pt = 150%.
rem selalu relatif terhadap ukuran font root (html), sementara em relatif terhadap ukuran font elemen saat ini, yang mewarisi dan berlipat melalui pohon elemen. Konverter ini memakai satu dasar untuk keduanya, jadi angkanya sama di sini; pada elemen bersarang keduanya bisa berbeda.
Karena semua browser besar hadir dengan ukuran font awal 16 px, sehingga 1 rem = 16 px pada halaman yang belum diubah. Jika CSS Anda mengubah ukuran root — trik 62.5% yang populer membuat 1 rem = 10 px — masukkan nilai itu di kolom dasar.
Kalikan 72 dan bagi 96: CSS menetapkan rasionya pada 96 px per inci dan 72 pt per inci, jadi 16 px = 12 pt. Satuan pt terutama penting untuk stylesheet cetak dan dokumen.
rem umumnya direkomendasikan untuk tipografi karena ikut menskala saat pengguna mengubah ukuran font browser pilihan mereka, yang diabaikan px. px tetap layak untuk hal yang tidak seharusnya menskala bersama teks, seperti border atau bayangan.
Tidak. Konversinya segelintir perkalian yang dilakukan dalam JavaScript di perangkat Anda — tidak ada yang dikirim ke server mana pun atau disimpan di mana pun.
Vai.la mengubah URL apa pun menjadi tautan pendek dengan statistik klik, QR Code, dan biolink Anda sendiri.
Vai.la tidak bertanggung jawab atas cara alat-alat ini digunakan maupun atas keputusan yang diambil berdasarkan hasilnya.