Font size

Ditanyakan 3 bulan yang lalu oleh Febian Achmad Subagjo

apa ada perbedaan dengan menggunakan satuan "em" dan "px" dan mana yang lebih cocok untuk membuat tampilan yang sesuai dengan ukuran device browser

1 JAWABAN / 1 KOMENTAR

Generic placeholder image
Oriza Sahputra menjawab pada tanggal 8 August 2019
  1. Px

Satuan ini sifatnya to the point, dihitung langsung jumlah pixel di layar. Kalau kita tentukan 1px ya akan tampil sebesar 1px, kalau kita tulis 30px akan tampil 30px.

  1. Em

Nah kalau em ini tidak to the point, besarnya bergantung dengan parent tag. Jika parentnya 20px, lalu kita set font 2em, maka yang muncul di layar akan 40px (2 kali lipat parent px).

Mungkin kalau px mas sudah sering pakai. Nah disini saya coba contohkan penggunaan em saja ya :

<style>
p {
    font-size:20px;
}

p strong {
    font-size:2em;
    color:red;
}
</style>

<p>Conveniently iterate efficient <strong>methodologies</strong> with compelling synergy.</p>

Tag p sudah kita tentukan fontnya 20px. Nah, pada tag strong kita tentukan besarnya 2em. Disini besaran strong akan muncul 2 kali lebih besar dari yang sudah ditentukan.

Baik px maupun em dibutuhkan dalam penentuan besar font pada berbagai device, sifatnya komplementer, bukan untuk saling menggantikan / bagusan mana.

Comment ..

thank you so much

Dikomentari 2 bulan yang lalu oleh Febian Achmad Subagjo