Studi Kasus: Landing Responsif

Target

Landing page sederhana yang sempurna di HP, tablet, dan desktop memakai semua teknik modul ini: mobile-first, clamp(), auto-fit, dan satu breakpoint.

Struktur HTML

<header class="hero">
  <h1>Belajar CSS Menyenangkan</h1>
  <p>Dari nol sampai bisa bikin website responsif.</p>
  <a class="cta" href="#">Mulai Belajar</a>
</header>

<section class="fitur">
  <div class="kartu-fitur">...</div>
  <div class="kartu-fitur">...</div>
  <div class="kartu-fitur">...</div>
</section>

<footer>...</footer>

Hero: tipografi mengalir + mobile-first

/* Dasar HP */
.hero {
  text-align: center;
  padding: 48px 20px;
}

.hero h1 {
  font-size: clamp(2rem, 8vw, 4rem);
  line-height: 1.05;
  margin: 0 0 16px;
}

.hero p {
  font-size: clamp(1rem, 3vw, 1.25rem);
  color: #475569;
  max-width: 60ch;
  margin: 0 auto 24px;
}

.cta {
  display: inline-block;
  background: #38bdf8;
  color: white;
  padding: 14px 32px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
}

/* Desktop: hero lebih lega */
@media (min-width: 768px) {
  .hero {
    padding: 96px 24px;
  }
}

Satu breakpoint saja. Judul mengalir via clamp, tidak perlu breakpoint font.

Fitur: grid tanpa breakpoint

.fitur {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  padding: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.kartu-fitur {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 28px;
  text-align: center;
}

Grid auto-fit menangani semua ukuran: 1 kolom di HP, 3 di desktop. Nol media query untuk bagian ini.

Daftar periksa responsif

Sebelum bilang "selesai", cek:

1. Tidak ada scroll horizontal di 360px (penyebab umum: gambar tanpa max-width, atau vw tanpa perhitungan).
2. Tombol cukup besar disentuh (minimal 44px tinggi di mobile).
3. Teks terbaca: minimal 16px untuk body (mencegah zoom otomatis iOS pada input), baris tidak terlalu panjang.
4. Uji di 360px, 768px, 1280px: tiga titik ini menangkap mayoritas masalah.

/* Pola tombol ramah jempol */
.cta {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 12px 32px;
}

Catatan teknis: iOS Safari otomatis zoom saat input font-size di bawah 16px. Selalu set input minimal 16px di mobile untuk menghindari zoom yang mengganggu.

Tips profesional

• Checklist rilis responsif: 360px tanpa scroll horizontal, tombol >= 44px, teks >= 16px, gambar tidak gepeng, uji 3 lebar.
• Screenshot tiap breakpoint dan simpan di dokumentasi project sebagai bukti uji.
• Responsif bukan hanya lebar: uji juga mode landscape HP dan zoom 200% untuk aksesibilitas.

Pola siap salin: section landing responsif

.section {
  padding: clamp(48px, 8vw, 96px) 24px;
}

.section .wadah {
  width: min(1100px, 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 3vw, 32px);
}

Setiap section landing: padding mengalir, wadah terbatas, grid otomatis. Tanpa media query sama sekali.

Rangkuman

Landing responsif = mobile-first + clamp() untuk teks + auto-fit untuk grid + sedikit breakpoint untuk sentuhan akhir. Uji di tiga lebar dan cek daftar periksa.