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.
113 people recommended this post