BELAJAR CSS — SATUAN UKURAN UNTUK PEMULA
Mengenal Satuan Ukuran CSS
Dari px sampai clamp() — memahami ukuran CSS dengan bahasa sederhana, tanpa bikin kepala berasap.
px memang sangat nyaman.
Tetapi ketika mulai membuat website yang responsif, kita akan bertemu
dengan satuan lain seperti %, vw, vh,
rem, dan clamp().
Jangan langsung mencoba menghafalkan semuanya. Kita kenalan satu per satu.
01 — Kenapa CSS punya banyak satuan?
Bayangkan kamu ingin membuat sebuah kotak. Kamu bisa mengatakan:
Selesai. Kotaknya lebarnya 500 pixel.
Tetapi bagaimana kalau kotak itu dibuka di layar komputer yang lebarnya 1400px, lalu dibuka lagi di HP yang lebarnya hanya 390px?
Jadi sederhananya:
% / vw / vh / rem → ukuran yang bisa mengikuti keadaan
02 — px: teman lama kita
px adalah satuan yang paling mudah dipahami.
Ketika kita menulis:
kita sedang berkata: "Gunakan ukuran font 20 pixel."
Contoh lain
Untuk border, radius, jarak kecil, dan berbagai detail desain,
px masih sangat nyaman digunakan.
px = ukuran yang relatif tetap dan mudah dikontrol.
03 — %: ukuran berdasarkan induknya
Kalau kamu menulis:
artinya bukan 80 pixel. Artinya: 80% dari lebar elemen induknya.
Karena itu kita sering menemukan:
Di layar kecil, elemen mengikuti lebar layar.
Di layar besar, elemen tidak terus membesar karena dibatasi
max-width.
% = persentase terhadap elemen induk.
04 — vw: mengikuti lebar layar
vw adalah singkatan dari viewport width.
Gampangnya:
Jadi:
berarti lebarnya sekitar 80% dari lebar layar.
vw juga menarik untuk ukuran font:
Font akan ikut membesar ketika layar semakin lebar.
Tetapi ada masalah: kalau hanya memakai vw,
font juga bisa menjadi terlalu kecil di HP atau terlalu besar di monitor.
Nah, nanti kita akan bertemu dengan clamp() untuk mengatasi masalah ini.
vw = mengikuti lebar layar.
05 — vh: mengikuti tinggi layar
Kalau vw berhubungan dengan width,
maka vh berhubungan dengan height.
Contohnya:
Artinya bagian tersebut minimal memiliki tinggi sebesar satu layar penuh.
Ini sangat berguna untuk desain seperti halaman pembuka, welcome screen, landing page, atau halaman romantis full-screen.
satu tinggi layar penuh
vh = mengikuti tinggi layar.
06 — rem: ukuran berdasarkan font dasar
rem sering membuat pemula sedikit bingung,
tetapi konsep dasarnya sederhana.
Dalam banyak browser, ukuran dasar font adalah sekitar 16px. Maka secara umum:
| CSS | Kurang lebih |
|---|---|
1rem |
16px |
1.5rem |
24px |
2rem |
32px |
3rem |
48px |
Jadi:
kurang lebih berarti 32px jika ukuran dasar browser adalah 16px.
rem banyak digunakan untuk font dan spacing karena
ukurannya lebih mudah dibuat konsisten di seluruh website.
rem = ukuran yang mengacu pada font dasar/root.
07 — em: mirip rem, tetapi ada jebakannya
em mirip dengan rem, tetapi acuannya berbeda.
em → mengacu pada ukuran font elemen/induk
Contohnya:
Maka ukuran anak kira-kira:
Karena em dapat mengikuti ukuran induknya,
perhitungannya bisa menjadi bertingkat dan agak membingungkan.
em.
Pahami rem dulu. Nanti kalau sudah terbiasa dengan CSS,
em akan terasa lebih masuk akal.
08 — ch: ukuran yang dekat dengan dunia teks
Ini salah satu satuan yang menarik untuk blog.
ch kira-kira berkaitan dengan lebar karakter.
Maksud sederhananya: batasi panjang baris teks kira-kira agar berada di sekitar 70 karakter.
Kenapa ini menarik? Karena baris artikel yang terlalu panjang membuat mata cepat lelah.
Baris teks yang tidak terlalu panjang biasanya terasa lebih nyaman karena mata tidak perlu melakukan perjalanan terlalu jauh dari ujung kiri menuju ujung kanan.
ch = berguna untuk mengatur panjang baris teks.
09 — fr: membagi ruang dalam Grid
fr biasanya muncul ketika kita menggunakan
CSS Grid.
Misalnya:
Artinya ruang dibagi menjadi dua bagian sama besar.
Kalau:
maka bagian pertama mendapat ruang dua kali lebih besar daripada bagian kedua.
fr = membagi ruang yang tersedia dalam Grid.
10 — auto: biarkan browser menghitung
Kadang kita tidak perlu menentukan ukuran secara manual. Kita bisa mengatakan:
Artinya kurang lebih: "Browser, tentukan ukuran yang sesuai."
Contoh yang sangat sering ditemukan:
Di sini auto pada margin membantu menempatkan elemen
di tengah ketika ruang kiri dan kanan tersedia.
11 — min(), max(), dan clamp()
Nah, sekarang kita masuk ke bagian yang sangat berguna untuk membuat CSS responsif.
min()
Artinya: ambil nilai yang lebih kecil antara 90% dan 800px.
Jadi pada layar kecil, elemen bisa mengikuti layar. Pada layar besar, lebarnya berhenti di sekitar 800px.
max()
Artinya: ambil nilai yang lebih besar antara 20px dan 5vw.
Dan akhirnya... clamp() 🎯
clamp() bisa dianggap sebagai:
Contoh:
Artinya:
Ukuran minimum
Ukuran fleksibel
Ukuran maksimum
Jadi font boleh mengikuti ukuran layar melalui 5vw,
tetapi tidak akan mengecil di bawah 34px dan tidak akan membesar
melewati 52px.
5vw.
Kita bisa menggunakan 3vw, 4vw,
6vw, bahkan kombinasi seperti
calc(), sesuai kebutuhan desain.
Contoh yang lebih lembut
Dibandingkan 5vw, pertumbuhan ukuran font akan lebih lembut.
clamp(min, fleksibel, max)Artinya: boleh berubah, tetapi jangan terlalu kecil dan jangan terlalu besar.
12 — Jadi, kapan memakai yang mana?
| Satuan | Bahasa gampang | Cocok untuk |
|---|---|---|
px |
Ukuran tetap | Border, radius, detail, spacing tertentu |
% |
Persentase induk | Lebar elemen |
vw |
Persentase lebar layar | Ukuran yang mengikuti lebar layar |
vh |
Persentase tinggi layar | Full-screen |
rem |
Berdasarkan font dasar | Font dan spacing |
em |
Berdasarkan font induk | Ukuran relatif |
ch |
Kira-kira lebar karakter | Panjang baris teks |
fr |
Bagian dari ruang | CSS Grid |
clamp() |
Min + fleksibel + max | Responsive |
13 — Tidak perlu meninggalkan px
Ini penting.
Setelah mengetahui semua satuan tadi, bukan berarti sekarang
setiap px harus kita buang. 😄
Justru kita bisa menggabungkannya.
Perhatikan:
px + % + vw + vh
+ clamp()
Tidak ada aturan bahwa sebuah website harus menggunakan satu jenis satuan saja. Justru CSS yang bagus sering menggunakan beberapa satuan sekaligus sesuai kebutuhan masing-masing elemen.
14 — Peta belajar cepat 🧠
px ↓
% ↓
vw / vh ↓
rem ↓
clamp()
Lima bagian itu sudah cukup untuk membuatmu jauh lebih nyaman menghadapi CSS responsive.
Setelah mulai terbiasa, baru lanjutkan ke:
fr · ch · min() · max()
Sedangkan em bisa dipelajari belakangan.
Tidak perlu buru-buru. CSS itu bukan lomba hafalan. 😄
🎯 Ringkasan Satu Menit
```
px → "Saya mau ukuran yang jelas."
% → "Saya mau mengikuti induknya."
vw → "Saya mau mengikuti lebar layar."
vh → "Saya mau mengikuti tinggi layar."
rem → "Saya mau mengikuti ukuran font dasar."
ch → "Saya mau mengatur panjang baris teks."
fr → "Saya mau membagi ruang Grid."
clamp() → "Saya mau fleksibel, tapi tetap punya batas."
Kalau lupa, kembali saja ke artikel ini. Kita tidak sedang ujian. 😉
```Blog ini tidak memasang iklan. Jika Tuan dan Nona berkenan, bisa dukung blog ini dengan menraktir kopi. Terima kasih. ^_^
Mas Azer
Blogger Pelukis kata ...
