Pixel ↔ REM
Konversi antara pixel dan REM untuk CSS
Cara menggunakan Pixel ↔ REM
Konversi antara pixel dan REM untuk CSS Alat online gratis, tanpa pendaftaran, tanpa iklan mengganggu. Gunakan sekarang.
Mengapa developer web mengonversi piksel dan REM?
Praktik CSS modern lebih mengutamakan unit relatif (REM, EM) daripada piksel absolut untuk ukuran font dan jarak. Ini memastikan bahwa pengguna yang menetapkan ukuran font lebih besar di preferensi browser mereka melihat teks yang diskalakan secara proporsional — persyaratan fundamental untuk aksesibilitas web dan kepatuhan panduan WCAG.
- Ukuran font: Alih-alih
font-size: 16px, gunakanfont-size: 1rem. Jika ukuran font dasar browser pengguna adalah 20px, semuanya akan diskalakan secara proporsional — ini menjamin pengalaman yang baik bagi penyandang disabilitas penglihatan yang meningkatkan ukuran font sistem mereka. - Jarak dan padding: Margin dan padding dalam REM beradaptasi dengan preferensi teks pengguna.
padding: 1.5remlebih aksesibel daripadapadding: 24pxdan menghormati pengaturan pribadi pengguna. - Implementasi design system: Alat desain (Figma, Sketch) mengekspor dalam piksel. Konversikan ke REM sebelum menulis CSS agar design system dapat diakses dari awal.
- Media query: Media query berbasis REM menghormati preferensi ukuran teks pengguna.
@media (min-width: 48rem)diaktifkan pada 768px untuk dasar 16px, tetapi pada nilai piksel yang lebih tinggi untuk pengguna dengan font lebih besar. - Pustaka komponen: Membangun komponen yang dapat digunakan ulang dalam REM memastikan perilaku yang konsisten dalam berbagai konteks ukuran font dasar — penting bagi mereka yang membangun design system bersama.
REM vs EM: REM (Root EM) selalu relatif terhadap ukuran font elemen root (html) — konsisten dan dapat diprediksi di seluruh dokumen. EM relatif terhadap ukuran font elemen saat ini — dapat berakumulasi secara tak terduga dalam elemen bersarang. REM lebih diutamakan untuk sebagian besar kasus penggunaan.
Frequently Asked Questions
Apa ukuran font default browser?
Defaultnya adalah 16px di semua browser utama (Chrome, Firefox, Safari, Edge). Pengguna dapat mengubahnya di pengaturan browser — dan itulah tepatnya tujuan penggunaan REM. 1rem = 16px secara default, tetapi bisa 18px, 20px, atau bahkan 12px tergantung preferensi pengguna.
Mengapa beberapa developer menggunakan html { font-size: 62.5% }?
Menetapkan ukuran font root menjadi 62,5% dari 16px = 10px membuat perhitungan mental lebih mudah: 1,6rem = 16px, 2,4rem = 24px. Namun ini menimpa preferensi font pengguna, sebagian merusak tujuan aksesibilitas REM. Pendekatan yang lebih baik adalah menggunakan CSS calc() atau cukup membagi dengan 16.
Kapan saya harus menggunakan PX alih-alih REM?
Gunakan PX untuk border (border 1px harus selalu 1px), bayangan, dan elemen di mana ukuran piksel yang tepat penting terlepas dari preferensi teks. Gunakan REM untuk ukuran font, padding, margin, dan jarak apa pun yang harus diskalakan bersama teks untuk aksesibilitas yang lebih baik.
Apa perbedaan REM, EM, dan PX?
PX bersifat absolut — selalu ukuran yang sama terlepas dari konfigurasi. EM relatif terhadap ukuran font elemen induk — dapat berakumulasi dalam elemen bersarang. REM relatif terhadap ukuran font root — konsisten di seluruh dokumen. Untuk desain yang aksesibel, utamakan REM daripada PX untuk ukuran font dan jarak.
Bagaimana cara mengonversi seluruh desain dari piksel ke REM?
Bagi setiap nilai piksel dengan ukuran font root (default: 16). Sehingga 24px ÷ 16 = 1,5rem. Fungsi Sass (px-to-rem()) atau plugin PostCSS dapat mengotomatiskan konversi ini di seluruh codebase. Ada juga ekstensi VS Code yang mengonversi secara otomatis saat Anda mengetik.
REM vs EM vs PX vs VW/VH vs persentase
PX bersifat absolut — presisi tetapi tidak adaptif. REM diskalakan dengan ukuran font root — lebih baik untuk tipografi dan jarak yang aksesibel. EM diskalakan dengan ukuran font elemen induk — berguna untuk jarak tingkat komponen. VW/VH adalah persentase viewport — berguna untuk layout yang fluid. Persentase relatif terhadap elemen induk — penting untuk lebar kolom responsif. CSS modern menggabungkan: REM untuk tipografi dan jarak, VW/VH untuk layout keseluruhan, dan persentase untuk lebar kolom.