Materi
Pelajaran satuan di modul pertama membahas px, rem, dan persen. Tiga satuan lain dipakai saat ukuran harus mengikuti huruf elemen itu sendiri atau ukuran layar: em, vw, dan vh.
Satu em sama dengan ukuran huruf elemen itu sendiri. Tombol dengan font-size 20px dan padding 0.5em mendapat padding 10 piksel; tombol 14px dengan aturan yang sama mendapat 7 piksel, jadi jaraknya ikut mengecil bersama hurufnya. Bila em dipakai di properti font-size itu sendiri, acuannya ukuran huruf warisan dari induk, sehingga em bertumpuk di elemen bersarang: 1.2em di dalam 1.2em menjadi 1,44 kali ukuran awal.
Satu vw adalah satu persen lebar area tampil, dan satu vh satu persen tingginya. Di layar selebar 800 piksel, 50vw bernilai 400 piksel. Berbeda dari persen, vw tidak bergantung pada lebar induknya.
clamp() dan min()
Fungsi clamp(MIN, NILAI, MAKS) memakai nilai tengah selama berada di antara batas bawah dan batas atas. MDN mencatat bentuk itu sama dengan max(MIN, min(NILAI, MAKS)). Judul dengan font-size: clamp(1.25rem, 4vw, 2.5rem) tumbuh bersama lebar layar, tetapi pada root 16 piksel tidak pernah di bawah 20 atau di atas 40 piksel.
.judul-promo {
font-size: clamp(1.25rem, 4vw, 2.5rem);
}
.wadah {
width: min(100%, 60rem);
}Fungsi min() memilih nilai terkecil dari daftarnya. Deklarasi width: min(100%, 60rem) berarti selebar induk di layar sempit dan berhenti di 60rem di layar lebar, satu baris yang menggantikan pasangan width dan max-width.
