Px vs. Em vs. Rem: Unit CSS Mana Yang Harus Anda Gunakan?

Anda akan mempelajari beberapa unit CSS untuk menyesuaikan ukuran font teks saat membuat halaman web. Ada banyak satuan seperti pt, pc, ex, dll., tetapi biasanya Anda harus fokus pada tiga satuan yang paling populer: px, em, dan rem. Banyak pengembang biasanya tidak memahami perbedaan antara unit-unit ini; jadi, di bawah ini adalah penjelasan rinci tentang unit-unit ini.

Sebelum melanjutkan, perhatikan bahwa ada dua jenis satuan panjang: mutlak Dan relatif.

Panjang Mutlak

Satuan panjang absolut adalah tetap, dan panjang yang dinyatakan dalam salah satu dari ini akan muncul persis dengan ukuran itu.

Unit panjang mutlak tidak disarankan untuk digunakan pada layar, karena ukuran layar sangat bervariasi. Namun, mereka dapat digunakan jika media keluarannya diketahui, seperti untuk tata letak cetak.

Panjang Relatif

Satuan panjang relatif menentukan panjang relatif terhadap properti panjang lainnya. Skala satuan panjang relatif lebih baik di antara media rendering yang berbeda.

1. Px (Piksel)

Pixel mungkin adalah unit yang paling banyak digunakan dalam CSS dan sangat populer dalam mengatur ukuran font teks pada halaman web. Satu piksel (1px) didefinisikan sebagai 1/96 inci di media cetak.

Namun pada layar komputer, mereka biasanya tidak terkait dengan pengukuran aktual seperti sentimeter dan inci seperti yang mungkin Anda pikirkan; mereka hanya didefinisikan sebagai kecil tetapi terlihat. Apa yang dianggap terlihat tergantung pada perangkat.

Perangkat yang berbeda memiliki jumlah piksel per inci yang berbeda pada layarnya, yang dikenal sebagai kerapatan piksel. Jika Anda menggunakan jumlah piksel fisik pada layar perangkat untuk menentukan ukuran konten pada perangkat tersebut, Anda akan mengalami masalah dalam membuat semuanya terlihat sama di semua ukuran layar.

Di situlah rasio piksel perangkat masuk. Ini pada dasarnya hanya sebuah cara untuk menghitung berapa banyak ruang yang akan diambil piksel CSS (1px) di layar perangkat yang akan membuatnya terlihat berukuran sama jika dibandingkan dengan perangkat lain.

Di bawah ini adalah contohnya: -

<kelas div="wadah">
<div>
<h1>Ini adalah sebuah paragraf</h1>
<P>
 Lorem ipsum, dolor sit amet consectetur adipisicing elit.
 Reprehenderit insiden perferendis iure veritatis cupiditate delectus
 omni di! Officiis praesentium officia, nemo veniam consequatur
 nostrum sunt aliquid ipsam, corporis quas quaerat. Lorem ipsum dolor
 sit amet consectetur adipisicing elit. Hic quam beatae voluptatibus
 amet possimus iure menghalangi asumsi perbedaan debit likuid, autem
 vel ullam aut, quod corporis ratione atque ducimus dolorum.
</P>
</div>
</div>

.wadah {
 lebar: 100%;
 tinggi: 100vh;
 tampilan: fleksibel;
 justify-content: center;
 menyelaraskan-item: tengah;
}
.wadahdiv {
 max-width: 500px;
 padding: 5px 20px;
 perbatasan: 1px abu-abu padat;
 border-radius: 10px;
}
P {
 ukuran font: 16px;
}

keluaran

Kotak atas adalah tampilannya saat ditampilkan di layar yang lebih besar seperti laptop, dan kotak bawah adalah tampilannya saat ditampilkan di layar yang lebih kecil, seperti ponsel.

Perhatikan bagaimana teks di kedua kotak memiliki ukuran yang sama, pada dasarnya itulah cara kerja piksel. Ini membantu konten web (bukan hanya teks) terlihat berukuran sama di seluruh perangkat.

2. Em (L)

Unit em mendapatkan namanya dari huruf besar 'M' (em) karena sebagian besar unit CSS berasal dari tipografi. Ini menggunakan ukuran font elemen induk saat ini sebagai basisnya. Ini dapat digunakan untuk memperbesar atau memperkecil ukuran font suatu elemen berdasarkan ukuran font yang diwarisi dari induknya.

Katakanlah Anda memiliki div induk yang memiliki ukuran font 16px. Jika Anda membuat elemen paragraf di div itu dan memberinya ukuran font 1em, ukuran font paragraf akan menjadi 16px.

Namun, jika Anda memberikan paragraf lain ukuran font 2em yang akan diterjemahkan menjadi 32px. Perhatikan contoh di bawah ini:

<kelas div="div-one">
<kelas p="satu-em">1 em berdasarkan 10px</P>
<kelas p="dua-em">2 em berdasarkan 10px</P>
</div>
<kelas div="div-dua">
<kelas p="satu-em">1 em berdasarkan 10px</P>
<kelas p="dua-em">2 em berdasarkan 10px</P>
</div>
</div>

.div-satu {
 ukuran font: 15px;
}
.div-dua {
 ukuran font: 20px;
}
.one-em {
 ukuran font: 1em;
}
.dua-em {
 ukuran font: 2em;
}

keluaran

Anda dapat melihat bagaimana mereka dapat meningkatkan ukuran teks dan bagaimana hal itu dipengaruhi oleh ukuran font saat ini yang diwarisi dari penampung induk. Tidak disarankan untuk menggunakan em, terutama di dalam halaman berstruktur kompleks.

Jika tidak digunakan dengan benar, Anda mungkin mengalami masalah penskalaan di mana elemen mungkin tidak diukur dengan benar berdasarkan warisan ukuran yang kompleks di pohon DOM.

3. Rem (Root Em)

Rem bekerja hampir sama dengan em, tetapi perbedaan utamanya adalah rem hanya mereferensikan ukuran font elemen root pada halaman, bukan ukuran font induknya. Ukuran font root adalah ukuran font default yang ditentukan oleh pengguna di pengaturan browser mereka atau oleh Anda, pengembang.

Ukuran font default browser web biasanya 16px oleh karena itu 1rem akan menjadi 16px dan 2rem akan menjadi 32px. Namun, dalam kasus di mana ukuran font root diubah menjadi 10px misalnya; 1rem akan menjadi 10px dan 2rem akan menjadi 20px.

Berikut adalah contoh untuk memperjelas:

<kelas div="div-one">
<!--EM-->
<kelas p="satu-em">1 em berdasarkan wadah (40px)</P>
<kelas p="dua-em">2 em berdasarkan wadah (40px)</P>
<!--REM-->
<kelas p="satu-rem">1 rem berdasarkan root (16px)</P>
<kelas p="dua rem">2 rem berdasarkan root (16px)</P>
</div>

.div-satu {
 ukuran font: 40px;
}
.one-em {
 ukuran font: 1em;
}
.dua-em {
 ukuran font: 2em;
}
.one-rem {
 ukuran font: 1rem;
}
.dua-rem {
 ukuran font: 2rem;
}

keluaran

Seperti yang Anda lihat, paragraf yang ditentukan dengan unit REM sama sekali tidak terganggu oleh ukuran font yang dinyatakan dalam wadah kami dan dirender secara ketat relatif terhadap ukuran font root ditentukan dalam pemilih elemen HTML.

Px vs. Em vs. Rem: Unit Mana yang Terbaik?

Em tidak direkomendasikan karena kemungkinan memiliki hierarki elemen bersarang yang kompleks. REM biasanya diskalakan secara tepat dengan ukuran font default/basis baru yang ditentukan dalam pengaturan browser sebagai lawan dari PX. Ini menjelaskan mengapa Anda harus menggunakan REM saat bekerja dengan konten teks di halaman web Anda. REM memenangkan perlombaan. Penataan gaya dan penskalaan konten Anda yang lebih baik dengan REM menambahkan bakat ke situs Anda karena sangat ideal untuk pembuat situs web. Pengukuran langsung dari konten Anda akan menentukan tampilan dan nuansa situs web Anda, namun, Anda harus kreatif.