Penukar CSS px ↔ rem
Tukar antara unit CSS px dan rem.
px (Piksel)
Unit mutlak yang mewakili satu piksel pada skrin. Mempunyai saiz tetap dan terhad untuk reka bentuk responsif.
rem (Root EM)
Unit relatif berdasarkan saiz fon elemen akar (html). Bermanfaat untuk kebolehaksesan dan reka bentuk responsif.
Formula Penukaran
Cadangan Penggunaan
- • Saiz fon: rem disyorkan
- • Jarak (margin, padding): rem disyorkan
- • Sempadan: px boleh digunakan
- • Pertanyaan media: rem disyorkan
Panduan Lengkap Unit CSS
Memilih unit CSS yang betul dalam pembangunan web sangat mempengaruhi pengalaman pengguna dan kebolehaksesan. Pelajari perbezaan antara px dan rem dan cara menggunakannya dalam situasi yang sesuai.
📐 Ciri-ciri
- • Unit mutlak dengan padanan 1:1 dengan piksel skrin
- • Saiz yang konsisten di semua penyemak imbas
- • Kawalan susun atur yang tepat mungkin
- • Tidak terjejas oleh tetapan pengguna
✅ Kes Penggunaan yang Disyorkan
- • Ketebalan sempadan (1px, 2px)
- • Ofset bayang-bayang
- • Saiz ikon (16px, 24px)
- • Penyesuaian jarak halus
⚠️ Awas
- • Mengabaikan tetapan saiz fon pengguna
- • Boleh menyebabkan isu kebolehaksesan
- • Terhad untuk reka bentuk responsif
📐 Ciri-ciri
- • Berdasarkan saiz fon elemen akar (html)
- • Mencerminkan tetapan pengguna
- • Mengekalkan perkadaran yang konsisten
- • Mesra kebolehaksesan
✅ Kes Penggunaan yang Disyorkan
- • Tetapan saiz fon
- • Jarak (margin, padding)
- • Saiz bekas
- • Titik putus pertanyaan media
💡 Kelebihan
- • Mengekalkan perkadaran semasa menskala
- • Meningkatkan kebolehaksesan
- • Penyelenggaraan yang mudah
🎯 Strategi Penggunaan Khusus Unit
Tipografi
Gunakan rem untuk saiz fon dan jarak baris rem
Susun Atur
Gunakan rem untuk jarak dan bekas rem
Butiran
Gunakan px untuk sempadan dan bayang-bayang px
📱 Petua Reka Bentuk Responsif
Pendekatan Mudah Alih-dahulu
Tetapkan saiz fon asas kepada 16px dan skala dengan unit rem
html { font-size: 16px; }
h1 { font-size: 2rem; /* 32px */ }Penggunaan Pertanyaan Media
Kekalkan konsistensi dengan titik putus berasaskan rem
@media (min-width: 48rem) { /* 768px */ }
html { font-size: 18px; }
}♿ Pertimbangan Kebolehcapaian
✅ Amalan yang Disyorkan
- • Tetapkan saiz fon dengan unit rem
- • Kekalkan saiz fon minimum 16px
- • Jarak baris yang mencukupi (1.5 atau lebih)
- • Sasaran sentuhan minimum 44px
❌ Perkara yang Perlu Dielakkan
- • Menggunakan nilai px tetap untuk saiz fon
- • Teks kecil di bawah 12px
- • Lebar bekas tetap
- • Jarak baris 1.0 atau kurang
🔧 Sokongan dan Keserasian Penyemak Imbas
Unit px
Sokongan sempurna di semua penyemak imbas. Tersedia dari IE6+.
Unit rem
Sokongan sempurna di IE9+ dan penyemak imbas moden. Sandaran diperlukan untuk IE8 dan ke bawah.
Untuk sokongan IE8: Isytiharkan nilai px dahulu, kemudian tambah nilai rem sebagai sandaran
font-size: 18px; /* IE8 fallback */
font-size: 1.125rem; /* Modern browsers */