Konverter Satuan CSS
Masukkan nilai sekali dan lihat dalam setiap satuan panjang CSS — px, rem, em, pt, %, vw, dan vh — dengan ukuran font root, ukuran font induk, dan viewport pilihan Anda. Salin hasil mana pun dengan satu ketukan.
Konversi umum
Dikonversi ke setiap satuan
rem, em, dan % bergantung pada ukuran font; vw dan vh bergantung pada viewport. px dan pt memiliki rasio tetap (1pt = 1,3333px). Sesuaikan konteks di atas jika nilai default Anda berbeda.
Referensi px ke rem (root = 16px)
| px | rem | pt |
|---|---|---|
| 8px | 0.5rem | 6pt |
| 10px | 0.625rem | 7.5pt |
| 12px | 0.75rem | 9pt |
| 14px | 0.875rem | 10.5pt |
| 16px | 1rem | 12pt |
| 18px | 1.125rem | 13.5pt |
| 20px | 1.25rem | 15pt |
| 24px | 1.5rem | 18pt |
| 32px | 2rem | 24pt |
| 48px | 3rem | 36pt |
Dengan ukuran font root default 16px, bagi piksel dengan 16 untuk mendapatkan rem, dan kalikan dengan 0,75 untuk mendapatkan poin.
Tentang Konverter Satuan CSS
CSS memberi Anda beberapa cara untuk menyatakan panjang, dan memilih yang tepat menentukan perbedaan antara tata letak yang menskala dengan anggun dan yang rusak. Konverter ini mengubah satu nilai menjadi semua satuan CSS umum sekaligus. px (piksel) adalah satuan referensi mutlak — dalam CSS satu piksel didefinisikan sebagai 1/96 inci. rem relatif terhadap ukuran font root dokumen (elemen <html>), yang secara default 16px, sehingga 1rem = 16px dan 1,5rem = 24px; rem adalah standar modern untuk penentuan ukuran karena mengubah satu nilai root akan menskala ulang seluruh halaman, yang sangat baik untuk aksesibilitas. em relatif terhadap ukuran font induk elemen saat ini, sehingga bertumpuk saat disarangkan. pt (poin) adalah satuan cetak, tetap pada 1pt = 1/72 inci = 1,3333px, sehingga 12pt = 16px. % dalam konteks font-size sama dengan ukuran font induk, sehingga 100% sama dengan 1em. vw dan vh adalah 1% dari lebar dan tinggi viewport — ideal untuk tata letak cair, layar penuh. Atur ukuran font root, ukuran font induk, dan ukuran viewport Anda sendiri di panel lanjutan; nilai default yang masuk akal (16/16/1920×1080) langsung mencakup kasus px↔rem sehari-hari.
Cara mengonversi satuan CSS
- 1 Ketik nilai dan pilih satuannya (misalnya 24 px atau 1,5 rem).
- 2 Baca nilai setara dalam setiap satuan lain di kisi hasil, dan ketuk tombol salin pada kartu mana pun untuk menyalinnya siap-tempel (mis. «1.5rem»).
- 3 Buka panel lanjutan untuk mengubah ukuran font root, ukuran font induk, atau ukuran viewport jika proyek Anda tidak memakai default 16px / 1920×1080.
Rumus konversi
Setiap konversi melewati piksel menggunakan rasio CSS tetap: rem = px ÷ ukuran-font-root (default 16) — sehingga px = rem × 16. em = px ÷ ukuran-font-induk (default 16). pt = px × 0,75, karena 1px = 1/96 inci dan 1pt = 1/72 inci, menghasilkan 1pt = 96/72 px = 1,3333px dan 1px = 0,75pt. % = px ÷ ukuran-font-induk × 100 (persentase font-size, di mana 100% = ukuran font induk, identik dengan 1em). vw = px ÷ lebar-viewport × 100, dan vh = px ÷ tinggi-viewport × 100. Dengan nilai default itu berarti 16px = 1rem = 1em = 100% = 12pt = 0,8333vw = 1,4815vh. Jika basis seperti ukuran font root disetel ke 0, satuan yang bersangkutan menjadi tidak terdefinisi dan ditampilkan sebagai «—» alih-alih tak terhingga.
Pertanyaan yang sering diajukan
Berapa px untuk 1rem?
Secara default 1rem = 16px, karena rem relatif terhadap ukuran font root (<html>) dan browser menyetelnya ke 16px secara bawaan. Jadi 1,5rem = 24px dan 2rem = 32px. Jika Anda mengubah ukuran font root — misalnya menjadi 10px agar perhitungannya lebih sederhana — maka 1rem sama dengan nilai itu (16px menjadi 1,6rem). Atur ukuran font root Anda sendiri di panel lanjutan dan konverter menghitung ulang seketika.
Apa rumus px ke rem?
rem = px ÷ ukuran-font-root, dan kebalikannya px = rem × ukuran-font-root. Dengan root default 16px artinya Anda membagi nilai piksel dengan 16 untuk mendapatkan rem: 24px ÷ 16 = 1,5rem, 10px ÷ 16 = 0,625rem. rem lebih disukai daripada px untuk ukuran font dan jarak karena menghormati pengaturan ukuran font browser pengguna, yang lebih baik untuk aksesibilitas.
Berapa ukuran font root default?
Ukuran font root default di setiap browser utama adalah 16px, diterapkan pada elemen <html>. Ini adalah dasar untuk rem, sehingga 1rem = 16px kecuali Anda (atau sebuah stylesheet) menimpanya. Konverter ini menggunakan 16px sebagai default untuk ukuran font root maupun induk; Anda dapat mengubah keduanya di panel lanjutan agar cocok dengan proyek Anda.
Apa perbedaan antara px dan pt?
px (piksel) adalah satuan standar untuk layar dan didefinisikan dalam CSS sebagai 1/96 inci. pt (poin) adalah satuan cetak/tipografi tradisional, sama dengan 1/72 inci. Itu membuat rasionya tetap: 1pt = 96/72 px ≈ 1,3333px, dan 1px = 0,75pt. Jadi 12pt = 16px, itulah sebabnya dokumen cetak 12pt dan judul layar 16px tampak berukuran sama. Gunakan px (atau rem) untuk web dan sediakan pt untuk stylesheet cetak.
Alat terkait
Terus berkarya dengan UnitConv. Konversikan warna antara HEX, RGB, dan HSL dengan konverter warna, hasilkan gradien CSS, periksa rasio kontras WCAG, hitung rasio aspek, dan jelajahi satuan panjang di luar web di konverter satuan utama.