Perbedaan antara px, rem dan em
Di CSS Anda dapat menemukan unit pengukuran yang berbeda untuk semua elemen yang membentuk dokumen <html> yang paling banyak digunakan oleh semua adalah px , namun ada banyak lagi seperti yang dijelaskan di MDN. Kali ini kita akan fokus pada perbedaan utama antara satuan mutlak dan satuan relatif em dan rem .
Satuan absolut tidak berubah ukuran, sedangkan satuan relatif berubah sesuai dengan ukuran font elemen induk.
Piksel
Piksel adalah unit tetap dalam dokumen dan tidak relatif atau bergantung pada unit lain atau variasi font, dalam contoh berikut kami memiliki wadah dengan kelas yang disebut .unit lebar 200px dan tinggi 100px.
.units {
width: 200px;
height: 100px;
}
Ingat bahwa secara default sebagian besar browser memiliki ukuran font: 16px di elemen root<html>untuk kasus ini di mana kita menggunakan unit absolut sehingga ukuran font elemen root berubah, wadah kita akan tetap dengan lebar dan tinggi yang sama didefinisikan awalnya.
Rem
Unit rem adalah unit yang relatif terhadap elemen root <html>, ingat bahwa sebagian besar browser memiliki ukuran font: 16px, kembali ke contoh wadah di mana ukurannya adalah lebar 200px dan tinggi 100px, sekarang Anda berarti ini relatif terhadap elemen root, ini berarti bahwa 1rem = ukuran font elemen root.
1rem = 16px //When the font size of the root element has not changed.
Dalam contoh berikut, kami akan mengonversi dari px ke rem, seperti yang Anda lihat wadah kami masih mempertahankan lebar dan tinggi yang awalnya ditentukan 200px x 100px karena ukuran font adalah 16px.
.units {
width: 12.5rem; // 12.5rem = 200px / 16px (font size of root element)
height: 6.25rem; // 6.25rem = 100px / 16px (font size of root element)
}
Sekarang jika sumber elemen root kami berubah misalnya menjadi 24px wadah kami akan memiliki langkah-langkah berikut:
.units {
width: 12.5rem; // 12.5rem * 24px (new font size of root element) = 300px
height: 6.25rem; // 6.25rem * 24px (new font size of root element) = 150px
}
Karena mereka adalah unit yang relatif terhadap ukuran font elemen root, nilai ini dikalikan dengan nilai font yang baru ditentukan, yang memungkinkan kita untuk mempertahankan ruang setiap elemen kita.
em
Unit em adalah unit yang relatif terhadap elemen induk, kembali ke contoh wadah di mana ukurannya adalah lebar 200px dan tinggi 100px, elemen ini memiliki wadah induk yang memiliki ukuran font yang ditentukan: 14px, ini berarti bahwa 1em = 14px untuk semua unit elemen anak.
1em = 14px //The font value defined for the parent element.
.units-parent {
font-size: 14px;
}
.units {
width: 14.2857em; // 200px / 14px (font size of parent element) = 14.2857em
height: 7.1428em; // 100px / 14px (font size of parent element) = 7.1428em
}
Dalam hal ini, semuanya tergantung pada induknya, pada contoh sebelumnya ukuran font didefinisikan dalam unit absolut (px). Namun, ini tidak berarti bahwa unit em tidak dapat digunakan dengan unit rem . Ya, Anda dapat menggunakan keduanya dalam konteks yang sama, misalnya, elemen root memiliki ukuran font 16px dan elemen induk memiliki ukuran font 0,875rem yang akan menjadi 14px, maka kita dapat menyimpulkan bahwa elemen yang ada di dalam induk, ukuran fontnya akan menjadi 0,875rem yang akan menjadi 1em, dan setiap kali ukuran font elemen root berubah, semua elemen di bawahnya akan berubah misalnya.
16px = 1rem //Value of the root element font.
0.875rem(14px) = 1em //Value of the parent element font.
.units-parent {
font-size: 0.875rem;
}
.units {
width: 14.2857em; // 200px / 14px (font size of parent element) = 14.2857em
height: 7.1428em; // 100px / 14px (font size of parent element) = 7.1428em
}
Jika ukuran font elemen root berubah menjadi 24px maka
24px = 1rem //Value of the root element font.
0.875rem * 1rem = 21px //Value of the parent element font.
.units-parent {
font-size: 0.875rem;
}
.units {
width: 14.2857em; // 14.2857em * 0.875rem (new parent font size relative to root element font size) = 300px
height: 7.1428em; // 14.2857em * 0.875rem (new parent font size relative to root element font size) = 150px
}
Mengapa menggunakan satuan relatif?
Saat ini semua situs web harus dapat diakses oleh semua orang, dan salah satu dari banyak praktik untuk mencapainya adalah dengan menggunakan unit relatif, karena saat ini ada berbagai teknologi bantu sehingga pengguna dapat memodifikasi gaya dasar web aplikasi di antaranya ukuran font, menggunakan jenis unit relatif ini memastikan bahwa elemen ditampilkan dengan benar di semua perangkat. Sebagai pembuat aplikasi, kita harus memastikan bahwa setiap kreasi kita dapat digunakan oleh sebagian besar penduduk dunia, dengan selalu mempertimbangkan aksesibilitas (A11Y), yang sangat penting untuk setiap bisnis.