CSS 04B: Units, Sizing, dan Overflow

Ukuran CSS dapat bersifat tetap atau mengikuti konteks. Pemilihan unit memengaruhi responsivitas dan aksesibilitas.

1. Demo Unit dan Ukuran Fleksibel

2. Cara Memilih Unit

• px cocok untuk detail kecil seperti border.
• rem mengikuti ukuran font root dan cocok untuk font serta spacing global.
• em mengikuti ukuran font elemen saat ini, seperti padding tombol.
• Persen biasanya bergantung pada ukuran induk.
• vh dan vw bergantung pada viewport.

Hindari width: 100vw untuk konten biasa karena scrollbar dapat memicu luapan horizontal.

3. Batas Ukuran

Pada contoh, width: min(100% - 2rem, 72rem) berarti container memakai ruang yang tersedia sambil menyisakan margin, tetapi tidak pernah lebih lebar dari 72rem.

clamp(2rem, 5vw, 4rem) menjaga heading tidak lebih kecil dari 2rem dan tidak lebih besar dari 4rem.

4. Overflow

Overflow terjadi ketika isi lebih besar daripada kotaknya. overflow-x: auto memberi scrollbar hanya saat diperlukan. Jangan langsung memakai overflow: hidden karena konten penting dapat terpotong.

Latihan

Kecilkan viewport sampai 360px. Ubah batas container, ukuran minimum dan maksimum heading, serta panjang teks pada .contoh-kode. Amati bagian mana yang fleksibel dan bagian mana yang memiliki batas.

Rangkuman

Gunakan unit sesuai hubungan yang diinginkan: px untuk detail, rem untuk skala global, em untuk skala lokal, persen untuk induk, dan viewport untuk layar. Batasi ukuran agar layout tetap nyaman.