Konversi Satuan CSS untuk px, rem, dan em
Konversi Satuan CSS mengubah nilai px ke rem (atau rem ke px, px ke em) menjadi setiap satuan lain begitu Anda mengetik, memakai ukuran font dasar Anda sendiri. Masukkan angka, pilih satuan asalnya, lalu baca px, rem, dan em berdampingan.
Alat ini dibuat untuk pengembang front-end dan desainer yang memindahkan tata letak dari piksel tetap ke satuan relatif. Setel ukuran font dasar agar sesuai html { font-size } Anda, dan perhitungan tetap akurat untuk proyek nyata Anda, bukan asumsi 16px yang dipatok mati.
Cara Mengonversi Satuan CSS
Setel ukuran font dasar
Ukuran Font Dasar dimulai dari 16px, bawaan standar peramban. Ubah agar sesuai html { font-size } akar proyek Anda supaya hasil rem dan em akurat.
Pilih satuan masukan
Klik tab px, rem, atau em untuk memberi tahu pengubah satuan mana yang dipakai nilai Anda.
Masukkan nilai
Ketik angka apa pun dan lihat px, rem, dan em diperbarui secara langsung. Ketuk tombol Coba contoh seperti 16px atau 1.5rem untuk memuat nilai umum seketika.
Salin hasilnya
Klik tombol salin di samping baris mana pun untuk menyalin nilai beserta akhiran satuannya, seperti 1.5rem, siap ditempel langsung ke CSS Anda.
Butuh satu arah saja? Buka pasangan khusus seperti PX ke REM, REM ke PX, atau PX ke EM. Kedua kolom dapat diedit, jadi Anda bisa mengetik di salah satunya, dan tombol Tukar membalik ke pasangan kebalikannya sambil mempertahankan nilai Anda.
Fitur
Konversi Langsung
Nilai diperbarui begitu Anda mengetik, mengubah antara px, rem, dan em tanpa perlu menekan tombol.
Ukuran Font Dasar yang Dapat Diatur
Setel ukuran font akar dari 1 hingga 100px (bawaan 16px) agar rem dan em cocok dengan proyek nyata Anda.
Ketelitian Desimal yang Dapat Disetel
Pilih 1 hingga 6 angka desimal untuk mengatur seberapa teliti nilai hasil konversi.
Pasangan Dua Arah
Pada pasangan khusus PX ke REM, REM ke PX, dan PX ke EM, ketik di kolom mana pun dan kolom lainnya mengikuti.
Tukar Arah
Satu klik membalik pasangan konversi dan membawa nilai Anda saat ini ke arah sebaliknya.
Tabel Referensi Cepat
Tabel yang dapat dibentangkan menampilkan 18 nilai piksel umum dari 8px hingga 96px beserta padanan rem dan em-nya.
Salin Sekali Klik
Salin hasil apa pun lengkap dengan akhiran satuannya, seperti 1.5rem, agar bisa ditempel langsung ke lembar gaya Anda.
Tombol Contoh Cepat
Tombol siap pakai untuk ukuran umum seperti 12px, 16px, 24px, dan 1.5rem memuat nilai dengan satu ketukan.
Kartu Info Satuan
Kartu ringkas menjelaskan apa itu px, rem, dan em serta kapan tiap satuan menjadi pilihan yang tepat.
Pengaturan Tersimpan & Dipakai Bersama
Ukuran dasar dan ketelitian desimal Anda bertahan lewat localStorage dan tersinkron di halaman utama serta setiap pasangan.
Pertanyaan yang Sering Diajukan
Bagaimana cara mengonversi px ke rem?
Bagi nilai piksel dengan ukuran font dasar (akar): rem = px ÷ dasar. Dengan dasar bawaan 16px, 24px menjadi 1.5rem. Pengubah ini melakukan pembagian untuk Anda dan memperbarui begitu Anda mengetik, jadi Anda tidak perlu menghitung rumusnya secara manual.
Apa rumus rem ke px?
Kalikan nilai rem dengan ukuran font dasar: px = rem × dasar. Pada dasar 16px, 1.5rem sama dengan 24px. Ubah kolom Ukuran Font Dasar jika proyek Anda memakai ukuran akar berbeda, dan hasilnya menyesuaikan.
Apakah rem selalu berdasar 16px?
16px hanyalah nilai bawaan. rem relatif terhadap ukuran font akar <html>, yang oleh kebanyakan peramban disetel ke 16px, tetapi bisa Anda ubah di CSS. Itulah mengapa pengubah ini menyediakan kolom Ukuran Font Dasar — setel sesuai ukuran akar proyek Anda yang sebenarnya agar hasilnya akurat.
Apa beda em dan rem?
rem selalu relatif terhadap ukuran font elemen akar, jadi nilainya konsisten di seluruh halaman. em relatif terhadap ukuran font elemen induk, yang berarti nilai em bertumpuk saat elemen disarangkan — 1.2em di dalam 1.2em menghasilkan 1.44× ukuran akar.
Kapan sebaiknya memakai rem ketimbang px?
Pakai rem untuk tipografi, jarak, dan ukuran tata letak yang ingin menyesuaikan preferensi pengguna — pembaca yang menaikkan ukuran font bawaan peramban mereka diuntungkan oleh desain berbasis rem. Gunakan px untuk hal yang harus tetap, seperti garis tepi dan bayangan kotak.
Mengapa pasangan PX ke EM menampilkan "Ukuran Font Induk"?
Karena em relatif terhadap ukuran font elemen induk, bukan akar. Labelnya berganti menjadi Ukuran Font Induk sebagai pengingat bahwa ukuran acuan bergantung pada posisi elemen di dalam DOM, bukan pada ukuran akar <html>.
Apakah pengaturan saya tersimpan antarkunjungan?
Ya. Ukuran font dasar dan ketelitian desimal Anda disimpan di localStorage peramban dan dipakai bersama di pengubah utama serta setiap pasangan khusus. Pengaturan ini bertahan setelah Anda menutup peramban, dan tidak ada yang dikirim ke server.
Belum ada komentar. Jadilah yang pertama berkomentar!