px vs em vs rem
Saat mendesain saya memakai px karena tidak ada satuan lain di Sketch/Figma/dsb.
Saat bermain CSS saya mulai memakai rem karena tidak perlu pusing, dulunya masih memakai em.
Secara umum alias kalau tidak diganti-ganti, 16px itu sebanding dengan 1em atau 1rem.
pixel
Ukuran px selalu fix.
em
Ukuran em dipengaruhi oleh elemen yang membungkusnya. Misal:
<style>
div {font-size: 24px}
div > strong {font-size: .5em}
div > small {font-size: 2em}
div > strong, div > small {display: block}
</style>
<div>
<strong>teks tebal</strong>
<small>teks kecil</small>
</div>
Elemen <strong> memiliki ukuran .5em atau 0.5∗24px=12px. Elemen <small> memiliki ukuran 2em atau 2∗24px=48px.
Kalau saya mengganti ukuran font di <div>, misal dijadikan menjadi 10px, perbandingan keduanya adalah ini:
rem (root em)
Ukuran rem (root em) dipengaruhi oleh root alias <html>. Misal saya mengatur ukuran huruf dokumen html ini sebesar 24px, lalu elemen <div> memiliki ukuran 2px, dan elemen <p> yang ada di dalam <div> berukuran 2rem, bagaimana tampilannya?
<style>
html {font-size: 24px}
div {font-size: 2px}
div > p {font-size: 2.5rem}
</style>
<div>
<p>teks</p>
</div>
Karena saya memakai rem, jadi ukuran font yang ada di <div> tidak mempengaruhi apa-apa. teks di dalam <p> itu sendiri berukuran 2.5rem ∗ (root size) = 2.5 ∗ 24px = 60px.
Saya mulai memilih rem karena cukup ada 1 ukuran saja yang diatur, yaitu yang ada di <html>. Oh iya, rem tidak hanya saya pakai untuk font-size saja, tapi juga hal lain macam padding, margin, dsb.
Penggunaan rem ini juga memudahkan untuk membuatnya responsif, misal:
@media (max-width: 575px) {html {font-size: 12px;}}
@media (min-width: 576px) and (max-width: 767px) {html {font-size: 14px;}}
@media (min-width: 768px) and (max-width: 991px) {html {font-size: 16px;}}
@media (min-width: 992px) {html {font-size: 18px;}}
.row {margin-left: 1rem; margin-right: 1rem}
.col {padding-left: 1rem; padding-right: 1rem}
img.logo {width: 2rem; height: auto}
… dan ukuran-ukuran rem tinggal mengikuti ukuran di atas.
Untuk kasus tertentu, saya juga memakai vh dan vw yang ukurannya relatif dengan ukuran viewport, misalnya saat berurusan dengan hero.
Catatan: Ini adalah salinan jawaban saya di Quora. Saya akan menulis ulang jawaban yang saya suka di Quora ke dalam blog saya.
3 people enjoyed this post
