Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Konverter Piksel / REM / EM (Unit CSS)

PengembangTeks

MEMASUKKAN

Proses Otomatis

KELUARAN

Sisi klien

Unit Viewport

Viewport	vw	vh
360px (Ponsel)
768px (Tablet)
1280px (Laptop)
1920px (Desktop)

Tabel Referensi

Piksel	REM	EM	PT
8px
10px
12px
14px
16px
18px
20px
24px
32px
48px
64px

IKLAN · MENGHAPUS?

Memandu

Konverter Piksel / REM / EM

Konversi instan antar unit CSS: piksel (px), root em (rem), dan em. Sesuaikan ukuran font dasar dan saksikan semua nilai diperbarui secara real-time. Sempurna untuk pengembang front-end yang menerjemahkan spesifikasi desain ke dalam CSS.

Cara Penggunaan

Masukkan nilai di salah satu dari tiga bidang unit — px, rem, atau em — dan dua lainnya akan diperbarui secara instan. Sesuaikan ukuran font dasar (default 16px) menggunakan penggeser atau bidang masukan agar sesuai dengan ukuran font root proyek Anda. Tabel referensi di bawah ini menampilkan konversi umum secara sekilas.

Fitur

Konversi Dua Arah – Edit px, rem, atau em dan semua lainnya diperbarui secara instan
Ukuran Font Dasar yang Dapat Disesuaikan – Penggeser dan masukan tersinkronisasi, default 16px
Tabel Referensi – Ukuran umum dihitung otomatis untuk ukuran font dasar Anda
Pembaruan Real-Time – Input yang di-throttle untuk kinerja yang mulus
Hanya Sisi Klien – Tidak ada data yang dikirim ke server mana pun

IKLAN · MENGHAPUS?

 Tanya Jawab Umum

Apa perbedaan antara rem dan em di CSS?

rem (root em) relatif terhadap ukuran font elemen root (html), membuatnya konsisten di seluruh halaman. em relatif terhadap ukuran font elemen induk, yang dapat bertambah pada elemen bersarang. rem umumnya lebih disukai untuk konsistensi tata letak.
Mengapa 1rem sama dengan 16px secara default?

Browser menetapkan ukuran font root default 16px kecuali diubah. Jadi 1rem = 16px, 0.5rem = 8px, 1.5rem = 24px. Jika Anda mengatur html { font-size: 62.5%; }, maka 1rem = 10px, membuat perhitungan lebih mudah.
Kapan saya harus menggunakan px daripada rem atau em?

Gunakan px untuk nilai yang seharusnya tidak diskalakan dengan preferensi font pengguna, seperti batas, bayangan, atau titik henti media query. Gunakan rem untuk ukuran font dan spasi agar tata letak Anda menghormati pengaturan aksesibilitas pengguna. Gunakan em untuk penyesuaian ukuran relatif komponen.
Bagaimana zoom browser memengaruhi unit CSS?

Zoom browser menskalakan semua unit CSS secara proporsional, termasuk px. Ini berbeda dari penskalaan teks tingkat OS. Namun, jika pengguna mengubah ukuran font default browser mereka, nilai rem dan em akan menyesuaikan sementara nilai px tidak — membuat rem/em lebih baik untuk aksesibilitas.