Belajar CSS - Unit Modern dan Layout Fluid
Episode ini membahas unit modern untuk layout fluid: rem dan em untuk tipografi relatif, vw, vh, vmin, dan vmax untuk ukuran viewport, persen untuk ruang relatif, serta clamp untuk nilai yang menyesuaikan diri dalam rentang minimum dan maksimum.
#Pendahuluan
Episode 9 mengatur layout pada beberapa breakpoint. Episode 10 menghadirkan pendekatan yang lebih halus: layout fluid, di mana ukuran berubah secara kontinu mengikuti viewport tanpa melompat. Kuncinya adalah memilih unit yang tepat.
Piksel (px) memang mudah dipahami, tetapi ia kaku — ukuran tidak berubah saat layar berubah atau saat pengguna mengubah ukuran font sistem. Unit relatif seperti rem, vw, dan persen membuat antarmuka mengalir bersama lingkungannya.
Mengapa penting? Layout fluid mengurangi jumlah media query yang harus ditulis. Dengan clamp(), satu baris CSS menggantikan tiga baris media query. Memahami unit modern adalah langkah menuju CSS yang lebih pendek dan lebih kuat.
#rem dan em: Tipografi Relatif
Unit rem merujuk ukuran font elemen root — defaultnya 16px di mayoritas browser. Unit em merujuk ukuran font elemen saat ini:
html {
font-size: 100%;
}
.konten {
font-size: 1rem;
line-height: 1.6;
}
.judul {
font-size: 2rem;
margin-bottom: 1rem;
}1rem sama dengan 16px, 2rem sama dengan 32px. Mengubah font-size pada html akan menskalakan seluruh desain. Sebaiknya tetapkan font-size: 100% bukan nilai piksel, agar menghormati preferensi ukuran font pengguna.
.tombol {
font-size: 1rem;
padding: 0.75em 1.5em;
border-radius: 0.5em;
}
.tombol-besar {
font-size: 1.25rem;
}Dengan em, padding dan radius ikut membesar saat font-size bertambah. Tombol besar otomatis proporsional tanpa menulis ulang padding — pola yang sangat berguna untuk komponen skala tunggal.
#Persen dan Ukuran Relatif
Persen pada width dihitung relatif terhadap kontainer induk, sementara persen pada height relatif terhadap tinggi induk bila induk punya tinggi eksplisit:
.tombol {
width: 100%;
max-width: 320px;
}
.baris {
width: 60%;
margin-inline: auto;
}Kombinasi width: 100% dan max-width mencegah elemen melebar tak terkendali pada layar besar. max-width dengan margin-inline: auto adalah cara standar membuat konten terpusat dan tetap proporsional.
#Unit Viewport: vw, vh, vmin, vmax
Unit viewport merujuk dimensi jendela browser. 1vw sama dengan 1 persen lebar viewport, 1vh sama dengan 1 persen tinggi viewport:
.hero {
min-height: 60vh;
padding: 8vw 4vw;
}
.banner {
width: 100vw;
margin-left: calc(50% - 50vw);
}60vh membuat hero selalu mengisi 60 persen tinggi layar. Hati-hati dengan 100vw: pada beberapa browser lebar ini termasuk scrollbar, sehingga calc(100vw - 100%) sering dipakai untuk mencegah overflow horizontal.
.logo {
font-size: 8vmin;
}vmin mengambil nilai terkecil antara lebar dan tinggi viewport, vmax yang terbesar. Keduanya berguna untuk elemen yang harus proporsional pada orientasi potret maupun lanskap.
#clamp: Nilai yang Menyesuaikan Diri
clamp(min, pilihan, max) menetapkan nilai yang mengalir di antara dua batas. clamp() bekerja dengan unit campuran apa pun:
.judul {
font-size: clamp(1.5rem, 4vw, 3rem);
}
.container {
padding-inline: clamp(16px, 4vw, 48px);
}
.lebar {
width: clamp(280px, 60vw, 960px);
}Bacaannya: minimum 1.5rem, ideal 4vw, maksimum 3rem. Di layar kecil teks tidak turun di bawah minimum; di layar besar tidak melebihi maksimum. Satu baris clamp() menggantikan media query sekaligus menjaga tipografi tetap proporsional.
h2 {
font-size: clamp(1.5rem, 2vw + 1rem, 2.5rem);
}clamp() juga menerima kalkulasi sebagai nilai tengah, seperti 2vw + 1rem. Kombinasi unit ini menghasilkan skala tipografi fluid yang mulus dari ponsel hingga layar lebar.
#Latihan: Hero yang Fluid
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hero Fluid</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="hero">
<h1>Selamat Datang di DevNull</h1>
<p>Deskripsi singkat yang tetap enak dibaca di semua layar.</p>
<a href="#" class="cta">Mulai Belajar</a>
</section>
</body>
</html>* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: system-ui, sans-serif;
}
.hero {
min-height: 100svh;
display: flex;
flex-direction: column;
justify-content: center;
padding-inline: clamp(16px, 6vw, 96px);
background-color: #0f172a;
color: white;
}
h1 {
font-size: clamp(2rem, 5vw, 4rem);
margin-bottom: 1rem;
}
p {
font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
max-width: 60ch;
}
.cta {
display: inline-block;
margin-top: 2rem;
padding: 0.75em 1.75em;
border-radius: 0.5em;
background-color: #2563eb;
color: white;
text-decoration: none;
}Jalankan npx serve . dan geser lebar jendela. Judul dan padding menyesuaikan diri secara kontinu, tanpa media query sama sekali. Perhatikan 100svh — small viewport height — yang menghindari masalah scrollbar dinamis pada perangkat seluler.
#Kesalahan Umum dan Solusinya
#Memakai px untuk Ukuran Global
Piksel tidak mengikuti ukuran font pengguna. Untuk tipografi dan spacing utama, gunakan rem dan em agar desain menghormati preferensi aksesibilitas.
#100vw Menyebabkan Overflow
Bila ada scrollbar vertikal, 100vw bisa sedikit melebihi lebar konten. Gunakan width: 100% di dalam container atau koreksi dengan calc.
#Clamp dengan Urutan Salah
Urutan argumen clamp adalah minimum, nilai ideal, maksimum. Membaliknya membuat nilai tidak valid dan diabaikan oleh browser.
#Penutup
Inti yang harus dibawa pulang:
remmerujuk ukuran font root;emmerujuk ukuran font elemen.- Persen menghitung ruang relatif terhadap induk.
vwdanvhmengikuti dimensi viewport;vmindanvmaxmemilih yang terkecil atau terbesar.clamp(min, pilihan, max)membuat nilai fluid tanpa media query.- Gabungkan
clamp()denganremdanvwuntuk tipografi proporsional. - Kombinasi unit tepat mengurangi jumlah breakpoint yang perlu dirawat.
Di episode 11 selanjutnya kita akan membahas responsive images dan penggunaan
object-fit— memuat gambar yang sesuai ukuran layar dan mengontrol pemotongan di dalam bingkai.