nilai satuan ukuran dalam HTML di website

Selain menentukan nilai warna pada website, Agan juga harus sering berhadapan dengan deklarasi nilai dalam satuan ukuran tertentu, Penulisa...

Selain menentukan nilai warna pada website, Agan juga harus sering berhadapan dengan deklarasi nilai dalam satuan ukuran tertentu, Penulisan Satuan Ukuran tidak boleh memakai tanda spasi, Jadi kita tuliskan nilainya dan langsung tempelkan satuanya.
dalam website

Satuan ukuran secara umum ada dua jenis yaitu Absolut dan Relatif.
  • Satuan Absolit antara lain adalah : Cm, mm, inci (in), px (pixsel), pt (point), dan pc (picas), Satuan absolut yang paling sering kita pakai adalah px (pixel) nsedangkan yang lain agak jarang digunakan.
Nah sebagai perbandingan nya adalah : 1 px sekitar 1/96 inci, 1 pt sekitar 1/72 inci, 1 pc sama dengan 12pt.

  • Satuan Relatif adapaun antara lain : %, em, rem, ww, vh, vmin, dan vmax, satuan Relatif yang paling sering dipakai saat ini dominan ke %, em dan rem. Adapun nilainya masih dalam tahap pengenalan dan hanya di support browser modern.
# Penjelasan Masing Masing Satuan Relatif :
  • % : ukuran nya relatif terhadap ukuran font elemen induknya. 200% berati duaa kali ukuran font di elemen.
  • em : Ukuran nya relatif terhadap ukuran font elemen induknya. 2em berati dua kali ukuran font di elemen.
  • rem : Ukuranya relatuf terhadap ukuran font elemen root (html). Ukuran font elemen root biasanya ditetapkan pada selektor html. Jika tidak ditetapkan, maka browser secara default menetapkan ukuran font elemen root sebesar 16px.
  • vw : Ukuranya relatif terhadap 1% lebar viewport.
  • vh : Ukuranya terhadap 1% tinggi viewport.
  • vmin : Ukuranya relatif terhadapa 1% dimensi terkecil viewport.
Penggunaan satuan relatif dewasa ini lebih disarankan (terutama %, em, dan rem), karena lebih elegant tampilan laman webiste di berbagai jenis layar piranti.
Adapun satuan yang paling aman kita gunakan yang dikarenakan di dukung oleh browser kuno sekalipun adalah % dan em (relatif) serta px (absolut).

Untuk membandingkan penggunaan satuan satuan yang sering digunakan berikut ilustrasinya :
<DOCTYPE html>
<html>
    <head>
      <title>Macam Satuan Ukuran</title>
      <style>
        html {font-size: 16px;}
        .dua {font-size: 32px; border: 2px solid #000}
        .persen {font-size: 150%;}
        .emini {font-size: 0.5em;}
        .remini {font-size: 0.5rem;}
        .setengah {font-size: 8px;}
      </style>
    </head>
    <body>
      <p>Font paragraf ini = 16px.</p>
      <p class="dua">Font paragraf ini = 32px.</p>
      <p class="persen">Font paragraf ini = 24px = 150% x 16px.</p>
      <div class="dua">
        <p>Font paragraf ini = 32px.</p>
        <p class="persen">Font paragraf ini = 48px = 150% x 32px.</p>
        <p class="emini">Font paragraf ini = 16px = 0.5em x 32px.</p>
        <p class="remini">Font paragraf ini = 8px = 150% x 16px.</p>
      </div>
      <p class="setengah">Font paragraf ini = 8px.</p>
    </body>
<html>

dan hasil nya dan lihat perbandingan ukuran nya :

satuan ukuran dalam website
Keterangan :
- Saat class Persen diterapkan pada paragraf ketiga, jadi ukuran font nya dihitung dari 150% dari aturan elemen induknya, yaitu root/html (16px).
Saat class Persen diterapkan pada paragraf kelima ukuran font dihitung 150% dari ukuran elemen induknya, yaitu div ber-class dua (32px). dan hasilnya, ukuran font berbeda meksipun paragraf sama sama menggunakana class persen.

- Meksipun sama sama berada di dalam elemen div ber-class dua, di paragraf ke enam dan ketujuh memiliki ukuran font yang berbeda. dan paragraf keenam diberi class emini (satuan em) sehingga ukuran font dihitung 0.5 kali aturan elemen div ber-class dua (32px). Paragraf ketujuh diberi class remini (satuan rem), sehingga ukuran font dihitung 0.5 kali aturan elemen root/html (16px), bukan 0.5 kali aturan elemen div ber-class dua (32px).

Postingan Terkait

0 komentar