Belajar CSS Part 10: Teknik Responsif Lanjutan

by

Setelah mempelajari Flexbox & Grid Layout di Part 9, sekarang kita akan melanjutkan dengan teknik responsif lanjutan untuk memastikan desain kita benar-benar responsif dan berfungsi dengan baik di semua perangkat, termasuk desktop, tablet, dan smartphone.

Di Part 10 ini, kamu akan mempelajari:

  • Bagaimana menggunakan media queries lebih lanjut untuk membuat desain lebih responsif
  • Cara mengatur layout dan font responsif dengan menggunakan unit-unit fleksibel
  • Teknik optimasi gambar dan media agar desain lebih cepat dimuat dan efisien

Responsive Typography: Mengatur Ukuran Font dengan Unit Fleksibel

Pada responsive typography, kita menggunakan unit-unit fleksibel seperti em, rem, dan % untuk mengatur ukuran font yang sesuai dengan ukuran layar perangkat.

1. Menggunakan em dan rem

em dan rem adalah unit yang fleksibel untuk ukuran font. Perbedaannya adalah:

  • em mengukur berdasarkan ukuran font elemen induk
  • rem (root em) mengukur berdasarkan ukuran font dari elemen html atau root

html {font-size: 16px;}
h1 { font-size: 2rem; /* 32px karena 2 * 16px */}
p { font-size: 1rem; /* 16px */ }

Contoh ini akan memperlihatkan:

  • rem untuk ukuran global
  • em untuk komponen yang mengikuti parent
  • Responsive dengan mengubah font-size pada html

Contoh HTML Lengkap: Penggunaan em dan rem

<!DOCTYPE html>
<html>
<head>
  <title>Contoh em dan rem</title>
</head>
<body>

  <h1>Contoh Penggunaan em dan rem</h1>
  <p>
    Paragraf ini menggunakan <strong>1rem</strong> sehingga mengikuti ukuran root (html).
  </p>

  <div class="card">
    <p>
      Paragraf dalam card ini menggunakan <strong>1.2em</strong> sehingga mengikuti ukuran font parent (20px).
    </p>
  </div>
  <button class="button">Tombol dengan em</button>

</body>
</html>

Penjelasan

  • h1 dan p mengikuti ukuran html (rem)
  • Teks dalam .card mengikuti ukuran parent (em)
  • Padding tombol ikut membesar jika font-size berubah
  • Saat layar < 600px → semua ukuran rem otomatis mengecil

Menggunakan rem memberikan konsistensi ukuran font yang lebih mudah diatur di seluruh website.

2. Menggunakan %

Unit % juga digunakan untuk ukuran font yang responsif, karena persentase akan dihitung berdasarkan ukuran font elemen induk. 

h1 { font-size: 150%; }

Artinya:

Jika parent memiliki font-size 16px →
150% × 16px = 24px

Contoh HTML Lengkap: Contoh Unit %

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Unit %</title>
</head>
<body>

  <h1>Judul 150%</h1>

  <p>Paragraf normal (16px).</p>

  <div class="box">
    <p>Paragraf ini 120% dari 20px (jadi 24px).</p>
  </div>

</body>
</html>

Penjelasan Hasil

  • h1 → 150% dari 16px = 24px
  • .box → 20px
  • .box p → 120% dari 20px = 24px

Di sini, ukuran font h1 akan menjadi 150% dari ukuran font induknya.

Optimasi Gambar untuk Desain Responsif

Gambar yang digunakan pada website perlu dioptimasi agar ukurannya menyesuaikan dengan ukuran layar perangkat. Kita bisa menggunakan atribut srcset dan sizes untuk menyediakan berbagai ukuran gambar, dan browser akan memilih gambar yang paling sesuai.

1. Menggunakan srcset

Atribut srcset memungkinkan kita untuk menyediakan beberapa versi gambar yang memiliki resolusi berbeda. Browser kemudian memilih versi gambar yang paling sesuai dengan ukuran layar dan resolusi perangkat. 


<img src="/example/image-800px.jpg" 
     srcset="/example/image-400px.jpg 400w, /example/image-800px.jpg 800w, /example/image-1200px.jpg 1200w"
     sizes="(max-width: 600px) 400px, 800px"
     alt="Contoh gambar responsif">

Artinya:

  • image-400px.jpg memiliki lebar 400px
  • image-800px.jpg memiliki lebar 800px
  • image-1200px.jpg memiliki lebar 1200px

Huruf w berarti width (lebar gambar dalam pixel).

Browser akan memilih gambar yang paling sesuai dengan:

  • Lebar layar
  • Resolusi perangkat (device pixel ratio)

Contoh HTML Lengkap: Gambar Responsif

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Gambar Responsif</title>
</head>
<body>

    <h2>Contoh Gambar Responsif dengan srcset</h2>

    <img src="/example/image-800px.webp" 
         srcset="/example/image-400px.webp 400w, 
                 /example/image-800px.webp 800w, 
                 /example/image-1200px.webp 1200w"
         sizes="(max-width: 600px) 400px, 800px"
         alt="Contoh gambar responsif">
		 
	<p>Ubah ukuran browser untuk melihat gambar yang berbeda dimuat.</p>

</body>
</html>

Penjelasan Lengkap tentang srcset

srcset adalah atribut pada tag <img> yang memungkinkan kita menyediakan beberapa versi gambar dengan ukuran/resolusi berbeda.

Tujuannya:

  • Mengoptimalkan performa website
  • Menghemat bandwidth
  • Mempercepat loading
  • Menampilkan gambar yang tajam di layar HD/Retina

Dalam contoh ini, gambar yang digunakan akan disesuaikan dengan lebar layar perangkat, sehingga gambar yang lebih kecil digunakan di perangkat dengan layar kecil untuk menghemat bandwidth.

2. Menggunakan Picture Element

Selain srcset, kita juga bisa menggunakan <picture> element untuk mengganti gambar berdasarkan kondisi tertentu (misalnya, resolusi layar atau orientasi perangkat). 


<picture>
  <source media="(max-width: 600px)" srcset="image-small.jpg">
  <source media="(max-width: 1200px)" srcset="image-medium.jpg">
  <img src="image-large.jpg" alt="Contoh gambar dengan picture element">
</picture>

Menggunakan <picture> Element

Berbeda dengan srcset yang hanya memilih ukuran terbaik dari gambar yang sama, elemen <picture> memungkinkan kita mengganti gambar yang benar-benar berbeda berdasarkan kondisi tertentu, seperti:

  • Ukuran layar
  • Orientasi perangkat
  • Resolusi layar
  • Format gambar (WebP, JPG, AVIF, dll)

Contoh HTML Lengkap: Picture Element

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Picture Element</title>
</head>
<body>

  <h2>Contoh Gambar dengan Picture Element</h2>

  <picture>
    <source media="(max-width: 600px)" srcset="\example\image-small.webp">
    <source media="(max-width: 1200px)" srcset="\example\image-medium.webp">
    <img src="\example\image-large.webp" alt="Contoh gambar dengan picture element">
  </picture>

  <p>Coba ubah ukuran layar untuk melihat gambar berubah.</p>

</body>
</html>

Kesimpulan

  • srcset → Mengatur ukuran/resolusi gambar
  • <picture> → Mengganti gambar berdasarkan kondisi
  • Keduanya bisa digabungkan
  • Sangat penting untuk performa dan user experience

Dengan <picture>, kita bisa lebih spesifik dalam memilih gambar sesuai kondisi perangkat yang berbeda.

Media Queries Lanjutan untuk Desain Responsif

Sekarang, kita akan mempelajari teknik media queries lanjutan untuk menyesuaikan desain dengan perangkat yang lebih bervariasi, termasuk pengaturan layout, ukuran font, dan elemen lainnya yang responsif terhadap lebar layar perangkat.

1. Menggunakan Breakpoints yang Fleksibel

Daripada menggunakan breakpoints yang kaku, kita bisa membuat breakpoints yang lebih fleksibel dengan menggunakan min-width atau max-width berdasarkan desain kita. 


@media screen and (min-width: 768px) {
  /* Desain untuk tablet ke atas */
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 768px) {
  /* Desain untuk perangkat dengan lebar layar kecil */
  .container {
    display: block;
  }
}

Menggunakan Breakpoints yang Fleksibel

Daripada membuat ukuran tetap (fixed), kita bisa menggunakan:

  • min-width → berlaku dari ukuran tertentu ke atas
  • max-width → berlaku sampai ukuran tertentu

Tujuannya agar desain mengikuti kebutuhan layout, bukan sekadar ukuran perangkat tertentu.

Contoh HTML Lengkap: Flexible Breakpoints

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexible Breakpoints</title>
</head>
<body>

  <h2>Contoh Breakpoint Fleksibel</h2>

  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
    <div class="box">Box 5</div>
    <div class="box">Box 6</div>
  </div>

</body>
</html>

Kesimpulan

  • @media memungkinkan layout berubah sesuai ukuran layar
  • min-width cocok untuk mobile-first
  • Breakpoint harus mengikuti desain, bukan device
  • Dengan pendekatan ini, website akan otomatis menyesuaikan antara mobile dan desktop

Dengan media queries ini, desain kita akan menyesuaikan diri antara tampilan mobile dan desktop secara otomatis.

2. Menggunakan Media Queries untuk Orientasi Perangkat

Selain lebar layar, kita juga bisa menggunakan media queries untuk mengubah desain berdasarkan orientasi perangkat (portrait atau landscape). 


@media screen and (orientation: portrait) {
  /* Desain untuk mode portrait */
  .container {
    padding: 20px;
  }
}

@media screen and (orientation: landscape) {
  /* Desain untuk mode landscape */
  .container {
    padding: 40px;
  }
}

Ini berguna terutama untuk:

  • Smartphone
  • Tablet
  • Perangkat yang bisa diputar

Contoh HTML Lengkap: Media Query Orientation

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Media Query Orientation</title>
</head>
<body>

  <h2>Contoh Media Query Orientation</h2>

  <div class="container">
    Putar perangkat Anda untuk melihat perubahan tampilan.
  </div>

</body>
</html>

Penjelasan Cara Kerja

1. orientation: portrait

Aktif ketika:

  • Tinggi layar > Lebar layar
  • HP berdiri
@media (orientation: portrait)

2. orientation: landscape

Aktif ketika:

  • Lebar layar > Tinggi layar
  • HP atau tablet diputar horizontal
@media (orientation: landscape)

Best Practice

Gunakan orientation untuk:

  • Game
  • Dashboard
  • Video player
  • Aplikasi berbasis canvas

Jangan terlalu bergantung pada orientation saja
Selalu kombinasikan dengan width untuk hasil lebih stabil.

Kesimpulan

  • Media query tidak hanya untuk lebar layar
  • Kita bisa mendeteksi portrait & landscape
  • Cocok untuk pengalaman mobile yang lebih interaktif
  • Bisa digabung dengan breakpoint fleksibel

Dengan media queries ini, desain kita akan berubah tergantung pada orientasi perangkat.

Kesalahan Umum dalam Desain Responsif

  • Memilih ukuran font yang terlalu kecil atau terlalu besar di perangkat mobile
  • Lupa menyesuaikan ukuran gambar untuk berbagai perangkat
  • Overcomplicating desain responsif dengan terlalu banyak breakpoints

Ringkasan CSS Part 10

  • Gunakan unit-unit fleksibel seperti em, rem, dan % untuk ukuran font responsif
  • Optimalkan gambar dengan srcset dan <picture> untuk desain responsif
  • Gunakan media queries lanjutan untuk menyesuaikan layout dan elemen di perangkat dengan lebar layar yang berbeda

Lanjutan Materi

Ini adalah akhir dari seri CSS Part 1-10! Kamu telah belajar banyak tentang CSS, mulai dari layout dasar hingga teknik responsif yang lebih lanjut.

Untuk topik lebih lanjut, kami akan membahas CSS Preprocessing dan alat lain untuk meningkatkan workflow CSS di artikel berikutnya.

Leave a Comment

Responsive — 100%