View source for 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.

<syntaxhighlight lang="css" line="1">
.units {
  width: 200px;
  height: 100px;
}
</syntaxhighlight>

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.

<syntaxhighlight lang="css">
1rem = 16px  //When the font size of the root element has not changed.
</syntaxhighlight>

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.

<syntaxhighlight lang="css" line="1">
.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)
}
</syntaxhighlight>

Sekarang jika sumber elemen root kami berubah misalnya menjadi 24px wadah kami akan memiliki langkah-langkah berikut:

<syntaxhighlight lang="css" line="1">
.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
}
</syntaxhighlight>

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.

<syntaxhighlight lang="css">
1em = 14px  //The font value defined for the parent element.
</syntaxhighlight>

<syntaxhighlight lang="css" line="1">
.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
}
</syntaxhighlight>

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.

<syntaxhighlight lang="css">
16px = 1rem  //Value of the root element font.
0.875rem(14px) = 1em //Value of the parent element font.
</syntaxhighlight>

<syntaxhighlight lang="css" line="1">
.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
}
</syntaxhighlight>

Jika ukuran font elemen root berubah menjadi 24px maka

<syntaxhighlight lang="css">
24px = 1rem  //Value of the root element font.
0.875rem * 1rem = 21px //Value of the parent element font.
</syntaxhighlight>

<syntaxhighlight lang="css" line="1">
.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
}
</syntaxhighlight>

==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.

==Source==
*[https://carlmultimedia.com/px-vs-rem-vs-em/ carlmultimedia.com]
[[Category:Pemrograman]]
[[Category:CSS]]