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.
Satuan ukuran secara umum ada dua jenis yaitu Absolut dan Relatif.
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 :
dan hasil nya dan lihat perbandingan ukuran nya :
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).
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.
- 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.
- % : 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.
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 :
- 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).
0 komentar