toolsmoah

Konverter Satuan CSS px ↔ rem

Konversi antara satuan CSS px dan rem.

Konverter Satuan CSS
Konversi piksel (px) ke satuan rem.
Penjelasan Satuan CSS

px (Piksel)

Satuan absolut yang mewakili satu piksel di layar. Memiliki ukuran tetap dan terbatas untuk desain responsif.

rem (Root EM)

Satuan relatif berdasarkan ukuran font elemen root (html). Bermanfaat untuk aksesibilitas dan desain responsif.

Rumus Konversi

px → rem: px ÷ ukuran font dasar
rem → px: rem × ukuran font dasar

Rekomendasi Penggunaan

  • • Ukuran font: rem direkomendasikan
  • • Spasi (margin, padding): rem direkomendasikan
  • • Batas: px dapat digunakan
  • • Kueri media: rem direkomendasikan
Nilai Konversi Umum
px
rem
8px
0.5rem
12px
0.75rem
14px
0.875rem
16px
1rem
18px
1.125rem
20px
1.25rem
24px
1.5rem
32px
2rem

Panduan Lengkap Satuan CSS

Memilih satuan CSS yang tepat dalam pengembangan web sangat memengaruhi pengalaman pengguna dan aksesibilitas. Pelajari perbedaan antara px dan rem dan cara menggunakannya dalam situasi yang sesuai.

Panduan Mendalam Satuan Piksel (px)

📐 Fitur

  • • Satuan absolut dengan korespondensi 1:1 dengan piksel layar
  • • Ukuran konsisten di semua browser
  • • Kontrol tata letak yang presisi dimungkinkan
  • • Tidak terpengaruh oleh pengaturan pengguna

✅ Kasus Penggunaan yang Direkomendasikan

  • • Ketebalan batas (1px, 2px)
  • • Offset bayangan
  • • Ukuran ikon (16px, 24px)
  • • Penyesuaian spasi halus

⚠️ Peringatan

  • • Mengabaikan pengaturan ukuran font pengguna
  • • Dapat menyebabkan masalah aksesibilitas
  • • Terbatas untuk desain responsif
Panduan Mendalam Satuan rem

📐 Fitur

  • • Berdasarkan ukuran font elemen root (html)
  • • Mencerminkan pengaturan pengguna
  • • Mempertahankan proporsi yang konsisten
  • • Ramah aksesibilitas

✅ Kasus Penggunaan yang Direkomendasikan

  • • Pengaturan ukuran font
  • • Spasi (margin, padding)
  • • Ukuran kontainer
  • • Breakpoint kueri media

💡 Keuntungan

  • • Mempertahankan proporsi saat penskalaan
  • • Meningkatkan aksesibilitas
  • • Perawatan mudah
Panduan Aplikasi Praktis

🎯 Strategi Penggunaan Khusus Satuan

Tipografi

Gunakan rem untuk ukuran font dan jarak baris rem

Tata Letak

Gunakan rem untuk spasi dan kontainer rem

Detail

Gunakan px untuk batas dan bayangan px

📱 Kiat Desain Responsif

Pendekatan Mobile-first

Atur ukuran font dasar ke 16px dan skala dengan satuan rem

html { font-size: 16px; }
h1 { font-size: 2rem; /* 32px */ }
Penggunaan Kueri Media

Pertahankan konsistensi dengan breakpoint berbasis rem

@media (min-width: 48rem) { /* 768px */ }
html { font-size: 18px; }
}

♿ Pertimbangan Aksesibilitas

✅ Praktik yang Direkomendasikan
  • • Atur ukuran font dengan satuan rem
  • • Pertahankan ukuran font minimum 16px
  • • Jarak baris yang cukup (1,5 atau lebih)
  • • Target sentuh minimum 44px
❌ Hal yang Harus Dihindari
  • • Menggunakan nilai px tetap untuk ukuran font
  • • Teks kecil di bawah 12px
  • • Lebar kontainer tetap
  • • Jarak baris 1.0 atau kurang

🔧 Dukungan dan Kompatibilitas Browser

Satuan px

Dukungan sempurna di semua browser. Tersedia dari IE6+.

Satuan rem

Dukungan sempurna di IE9+ dan browser modern. Diperlukan fallback untuk IE8 dan di bawahnya.

Untuk dukungan IE8: Deklarasikan nilai px terlebih dahulu, lalu tambahkan nilai rem sebagai fallback

font-size: 18px; /* IE8 fallback */
font-size: 1.125rem; /* Modern browsers */
    Konverter Satuan CSS px ↔ rem | Lab Teks